/* Yan's Cakes desktop — info pages: Story, Delivery, Storage, Contact. */

function DInfo({ topic, onNav }) {
  if (topic === "Delivery") return <DDelivery />;
  if (topic === "Storage & Care") return <DStorage />;
  if (topic === "Contact") return <DContact />;
  if (topic === "Events") return <DEvents onNav={onNav} />;
  if (topic === "Check Order") return <DOrderLookup />;
  return <DStory onNav={onNav} />;
}

function DOrderLookup() {
  const [code, setCode] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [result, setResult] = React.useState(undefined); // undefined=idle, null=not found, obj=found
  const [loading, setLoading] = React.useState(false);
  const lookup = async () => {
    if (!code.trim() || !phone.trim()) return;
    setLoading(true);
    const found = window.YansStore ? await window.YansStore.find(code, phone) : null;
    setResult(found || null);
    setLoading(false);
  };
  const o = result;
  return (
    <div style={{ maxWidth: 620, margin: "0 auto", padding: "56px 32px 90px" }}>
      <DEyebrow>Order status</DEyebrow>
      <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2.2rem,3.6vw,3rem)", color: "var(--text-primary)", margin: "12px 0 8px" }}>Check Your Order</h1>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-secondary)", margin: "0 0 26px", lineHeight: 1.6 }}>Enter your order number and the mobile number used at checkout to see your order status and download your invoice.</p>
      <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: 22, boxShadow: "var(--shadow-sm)" }}>
        <label style={lkLbl}>Order Number</label>
        <div style={lkField}><i className="ph-light ph-receipt" style={lkIcon} /><input value={code} onChange={(e) => { setCode(e.target.value); setResult(undefined); }} placeholder="e.g. DO-090726-4821" style={lkInput} /></div>
        <label style={{ ...lkLbl, marginTop: 14 }}>Mobile Number</label>
        <div style={lkField}><i className="ph-light ph-phone" style={lkIcon} /><input value={phone} onChange={(e) => { setPhone(e.target.value); setResult(undefined); }} placeholder="e.g. 9123 4567" style={lkInput} /></div>
        <button onClick={lookup} disabled={loading} style={{ ...lkBtn, width: "100%", marginTop: 18, opacity: loading ? 0.6 : 1 }}>{loading ? "Checking…" : "Check status"}</button>
      </div>

      {o === null && (
        <div style={{ marginTop: 18, display: "flex", gap: 11, alignItems: "flex-start", background: "rgba(166,73,47,0.08)", border: "1px solid rgba(166,73,47,0.3)", borderRadius: "var(--radius-md)", padding: "15px 17px" }}>
          <i className="ph-light ph-warning-circle" style={{ fontSize: 20, color: "var(--brick)", flex: "none", marginTop: 1 }} />
          <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-body)", lineHeight: 1.55 }}>No order found for that number and mobile. Double-check both, or <a href="https://wa.me/94751266" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", fontWeight: 700, textDecoration: "none" }}>message us on WhatsApp</a>.</span>
        </div>
      )}

      {o && (
        <div style={{ marginTop: 18, background: "var(--surface-card)", border: "1px solid var(--hairline-gold)", borderRadius: "var(--radius-lg)", padding: 22, boxShadow: "var(--shadow-sm)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
            <div><div className="eyebrow" style={{ marginBottom: 4, letterSpacing: "0.08em" }}>Order {o.code}</div><div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-secondary)" }}>{o.method === "pickup" ? "Self-pickup" : "Delivery"} · {o.day} · {o.slot}</div></div>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--accent-soft)", color: "var(--accent)", fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 700, padding: "6px 13px", borderRadius: 999, whiteSpace: "nowrap", textTransform: "capitalize" }}><span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)" }} />{o.status}</span>
          </div>
          <div style={{ borderTop: "1px solid var(--border-subtle)", paddingTop: 12 }}>
            {(o.items || []).map((it, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-body)", padding: "5px 0" }}><span>{it.q} × {it.n}</span><span>{window.YANS.fmt(Math.round(it.p * it.q * 100) / 100)}</span></div>
            ))}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderTop: "1px solid var(--border-subtle)", marginTop: 8, paddingTop: 10 }}>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-primary)" }}>Total</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--text-primary)" }}>{window.YANS.fmt(Math.round((o.total || 0) * 100) / 100)}</span>
            </div>
          </div>
          <button onClick={() => window.printInvoice(o)} style={{ ...lkBtn, width: "100%", marginTop: 18, display: "flex", alignItems: "center", justifyContent: "center", gap: 9 }}><i className="ph-light ph-file-pdf" style={{ fontSize: 19 }} /> Print / Save Invoice (PDF)</button>
        </div>
      )}
    </div>
  );
}
const lkLbl = { display: "block", fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 700, color: "var(--text-secondary)", marginBottom: 7 };
const lkBtn = { height: 50, padding: "0 28px", border: 0, borderRadius: "var(--radius-md)", background: "var(--accent)", color: "#fff", fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 700, cursor: "pointer" };
const lkField = { display: "flex", alignItems: "center", gap: 10, border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)", padding: "0 14px", background: "var(--surface-raised)" };
const lkIcon = { fontSize: 18, color: "var(--text-muted)" };
const lkInput = { flex: 1, border: 0, outline: "none", background: "transparent", padding: "13px 0", fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-primary)" };

function DEvents({ onNav }) {
  const kinds = [
    { icon: "ph-cake", title: "Celebrations", body: "Birthdays, weddings and anniversaries — custom cakes and dessert tables." },
    { icon: "ph-briefcase", title: "Corporate & Office", body: "Meetings, launches and staff treats, delivered on schedule in bulk." },
    { icon: "ph-confetti", title: "Festive & Seasonal", body: "Chinese New Year, Christmas and Hari Raya gifting for clients and teams." },
  ];
  return (
    <div>
      <div style={{ position: "relative", height: 300 }}>
        <img src="photos/high-tea-set.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "rgba(81,23,17,0.55)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "0 24px" }}>
          <div className="eyebrow" style={{ color: "var(--gold-light)" }}>Events &amp; Catering</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2.4rem,4.5vw,3.6rem)", color: "#fff", margin: "12px 0 10px", textShadow: "0 2px 16px rgba(0,0,0,.4)" }}>Let&rsquo;s make it memorable</h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 16, color: "rgba(255,255,255,0.9)", maxWidth: "52ch", margin: 0, lineHeight: 1.6 }}>From intimate gatherings to large corporate orders, our team creates exclusive spreads tailored to your occasion.</p>
        </div>
      </div>
      <div style={{ maxWidth: 1080, margin: "0 auto", padding: "var(--section-y) 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24, marginBottom: 48 }}>
          {kinds.map((k) => (
            <div key={k.title} style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: 26, boxShadow: "var(--shadow-sm)" }}>
              <i className={"ph-light " + k.icon} style={{ fontSize: 34, color: "var(--gold-deep)" }} />
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 22, color: "var(--text-primary)", margin: "14px 0 8px" }}>{k.title}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.65, color: "var(--text-body)", margin: 0 }}>{k.body}</p>
            </div>
          ))}
        </div>
        <div style={{ background: "var(--surface-sunken)", borderRadius: "var(--radius-lg)", padding: "40px 36px", textAlign: "center", border: "1px solid var(--hairline-gold)" }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Event-exclusive orders</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.9rem,3vw,2.6rem)", color: "var(--text-primary)", margin: "0 0 12px" }}>Tell us about your occasion</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, color: "var(--text-body)", maxWidth: "48ch", margin: "0 auto 26px", lineHeight: 1.7 }}>Share your date, headcount and any flavour requests — we&rsquo;ll put together a custom quote. Bulk and made-to-order items available with advance notice.</p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="https://wa.me/94751266" target="_blank" rel="noopener noreferrer" style={{ ...dPrimary, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 9, textDecoration: "none" }}><i className="ph-light ph-whatsapp-logo" style={{ fontSize: 20 }} /> Enquire on WhatsApp</a>
            <button onClick={() => onNav({ s: "info", topic: "Contact" })} style={{ ...ghostBtn, height: 50 }}>Visit &amp; Contact Details</button>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-muted)", margin: "20px 0 0" }}>Customer service 9am&ndash;6pm</p>
        </div>
      </div>
    </div>
  );
}

function DStory({ onNav }) {
  return (
    <div>
      <div style={{ position: "relative", height: 340 }}>
        <img src="photos/signature-set.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "rgba(33,28,24,.45)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center" }}>
          <div className="eyebrow" style={{ color: "var(--gold-light)" }}>Since 1992</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2.5rem,5vw,4rem)", color: "#fff", margin: "12px 0 0", textShadow: "0 2px 16px rgba(0,0,0,.4)" }}>Our story</h1>
        </div>
      </div>
      <div style={{ maxWidth: 680, margin: "0 auto", padding: "var(--section-y) 32px", textAlign: "center" }}>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "1.15rem", lineHeight: 1.85, color: "var(--text-body)", margin: "0 0 24px" }}>At the heart of our confectionery is a passion for creating handcrafted delights that bring comfort, joy and unforgettable moments to every table. We take pride in baking premium cakes, freshly made breads, delicate pastries and artisanal cookies using quality ingredients and time-honoured recipes.</p>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "1.05rem", lineHeight: 1.85, color: "var(--text-body)", margin: "0 0 28px" }}>From soft, pillowy swiss rolls and rich, creamy cheesecakes to golden egg tarts, every product is thoughtfully crafted to deliver exceptional taste, texture and freshness.</p>
        <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "1.75rem", color: "var(--gold-deep)", margin: "0 0 32px" }}>Delicious to the very last bite.</p>
        <button onClick={() => onNav({ s: "category", cat: "Swiss Rolls" })} style={dPrimary}>Explore the collection</button>
      </div>
    </div>
  );
}

function DDelivery() {
  const { delivery, deliveryNotes, deliveryUrgent } = window.YANS;
  return (
    <div style={{ maxWidth: 760, margin: "0 auto", padding: "56px 32px 80px" }}>
      <DEyebrow>Delivery</DEyebrow>
      <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2.2rem,3.6vw,3rem)", color: "var(--text-primary)", margin: "12px 0 24px" }}>Schedule &amp; cut-offs</h1>
      <div style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", marginBottom: 26, boxShadow: "var(--shadow-sm)" }}>
        <div style={{ display: "flex", background: "var(--accent-soft)", padding: "13px 20px" }}>
          <span style={{ flex: 1, ...thStyle }}>Order paid</span><span style={{ flex: 1, ...thStyle }}>Earliest delivery</span>
        </div>
        {delivery.map((d, i) => (
          <div key={i} style={{ display: "flex", padding: "15px 20px", borderTop: "1px solid var(--border-subtle)" }}>
            <span style={{ flex: 1, fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--text-body)" }}>{d.when}</span>
            <span style={{ flex: 1, fontFamily: "var(--font-body)", fontSize: 14.5, fontWeight: 700, color: "var(--text-primary)" }}>{d.get}</span>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 13 }}>
        {deliveryNotes.map((n, i) => (
          <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
            <i className="ph-light ph-check-circle" style={{ fontSize: 20, color: "var(--gold)", flex: "none", marginTop: 1 }} />
            <span style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-body)", lineHeight: 1.6 }}>{n}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, display: "flex", gap: 12, alignItems: "flex-start", background: "var(--accent-soft)", border: "1px solid var(--hairline-gold)", borderRadius: "var(--radius-md)", padding: "14px 16px" }}>
        <i className="ph-light ph-lightning" style={{ fontSize: 20, color: "var(--accent)", flex: "none", marginTop: 1 }} />
        <span style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-body)", lineHeight: 1.6 }}>{deliveryUrgent.lead} <a href={deliveryUrgent.wa} target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", fontWeight: 700, textDecoration: "none" }}>{deliveryUrgent.phone}</a> on WhatsApp.</span>
      </div>
    </div>
  );
}

function DStorage() {
  const { storage } = window.YANS;
  return (
    <div style={{ maxWidth: 820, margin: "0 auto", padding: "56px 32px 80px" }}>
      <DEyebrow>Storage &amp; care</DEyebrow>
      <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2.2rem,3.6vw,3rem)", color: "var(--text-primary)", margin: "12px 0 24px" }}>Keep it fresh</h1>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {storage.map((s, i) => (
          <div key={i} style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: "18px 20px", boxShadow: "var(--shadow-xs)" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 21, color: "var(--text-primary)", marginBottom: 10 }}>{s.item}</div>
            <div style={{ display: "flex", gap: 18 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--gold-deep)", fontWeight: 600 }}><i className="ph-light ph-snowflake" /> {s.keep}</span>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-secondary)" }}>{s.life}</span>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 20, display: "flex", gap: 12, alignItems: "flex-start", background: "var(--surface-sunken)", borderRadius: "var(--radius-md)", padding: "16px 18px" }}>
        <i className="ph-light ph-heart" style={{ fontSize: 20, color: "var(--gold-deep)", flex: "none", marginTop: 1 }} />
        <span style={{ fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--text-body)", lineHeight: 1.6 }}>For the best taste and texture, bring chilled items to room temperature for a few minutes before serving.</span>
      </div>
    </div>
  );
}

function MapMarker() {
  return (
    <div style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }}>
      <div style={{ position: "absolute", left: "50%", top: "46%", transform: "translate(-50%,-50%)" }}>
        <div style={{ position: "absolute", left: "50%", top: "50%", width: 96, height: 96, transform: "translate(-50%,-50%)", borderRadius: "50%", border: "3px solid var(--accent)", boxShadow: "0 0 0 3px rgba(255,255,255,0.85), 0 8px 22px rgba(0,0,0,.25)", animation: "yansPulse 2.4s var(--ease-standard) infinite" }} />
        <div style={{ position: "absolute", left: "50%", top: "-58px", transform: "translateX(-50%)", background: "var(--accent)", color: "#fff", fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 700, letterSpacing: "0.02em", padding: "7px 13px", borderRadius: 999, whiteSpace: "nowrap", boxShadow: "0 6px 16px rgba(0,0,0,.3)" }}>
          Yan&rsquo;s Cakes
          <span style={{ position: "absolute", left: "50%", bottom: -5, transform: "translateX(-50%) rotate(45deg)", width: 10, height: 10, background: "var(--accent)" }} />
        </div>
      </div>
    </div>
  );
}
function DContact() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 520 }}>
      <div style={{ position: "relative", minHeight: 360, background: "var(--champagne)" }}>
        <iframe title="Yan's Cakes location" src="https://maps.google.com/maps?q=3020%20Ubi%20Ave%202%20%2301-137%20Singapore%20408896&output=embed" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }} loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
      </div>
      <div style={{ padding: "var(--section-y) clamp(2rem,5vw,5rem)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <DEyebrow>Visit &amp; contact</DEyebrow>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2rem,3.2vw,2.8rem)", color: "var(--text-primary)", margin: "12px 0 24px", lineHeight: 1.12 }}>We&rsquo;d love to hear from you</h1>
        <div style={{ display: "flex", flexDirection: "column", gap: 18, marginBottom: 28 }}>
          <DContactRow icon="ph-map-pin" head="Yan's Cakes" sub={<>Kampong Ubi Industrial Estate<br />3020 Ubi Ave 2, #01-137, Singapore 408896</>} />
          <DContactRow icon="ph-clock" head="Open daily · 7am–7pm" sub="Customer service 9am–6pm" />
          <DContactRow icon="ph-whatsapp-logo" head="Chat / WhatsApp" sub="Fastest way to reach us" />
        </div>
        <div style={{ display: "flex", gap: 12 }}>
          <a href="https://wa.me/94751266" target="_blank" rel="noopener noreferrer" style={{ ...dPrimary, display: "inline-flex", alignItems: "center", justifyContent: "center", textDecoration: "none" }}>Chat with us</a>
          <a href="https://share.google/7aJIKrTTGK1XxS7kp" target="_blank" rel="noopener noreferrer" style={{ ...ghostBtn, height: 50, display: "inline-flex", alignItems: "center", justifyContent: "center", textDecoration: "none" }}>Get directions</a>
        </div>
      </div>
    </div>
  );
}
function DContactRow({ icon, head, sub }) {
  return <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}><i className={"ph-light " + icon} style={{ fontSize: 26, color: "var(--gold)", flex: "none" }} /><div><div style={{ fontFamily: "var(--font-display)", fontSize: 21, color: "var(--text-primary)", lineHeight: 1.2 }}>{head}</div><div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-secondary)", marginTop: 2 }}>{sub}</div></div></div>;
}
const thStyle = { fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--gold-deep)" };

Object.assign(window, { DInfo, DStory, DDelivery, DStorage, DContact });