/* ============================================================
   Farbodfilms — Cart drawer, Checkout, Success, About, FAQ
   ============================================================ */

function CartDrawer({ open, close, items, removeItem, checkout }) {
  const total = items.reduce((s, i) => s + i.price, 0);
  return (
    <React.Fragment>
      <div className={"drawer-scrim " + (open ? "is-open" : "")} onClick={close} />
      <aside className={"drawer " + (open ? "is-open" : "")}>
        <div className="drawer-head">
          <span className="mono">YOUR CART · {items.length}</span>
          <button className="drawer-x" onClick={close} aria-label="Close">✕</button>
        </div>
        {items.length === 0 ? (
          <div className="drawer-empty">
            <p>Your cart is empty.</p>
            <span className="mono">Add a look to get started.</span>
          </div>
        ) : (
          <React.Fragment>
            <div className="drawer-items">
              {items.map((i, idx) => (
                <div className="drawer-item" key={i.id + idx}>
                  <span className="drawer-sw" style={{ background: i.swatch }} />
                  <div className="drawer-item-info">
                    <span className="drawer-item-name">{i.name}</span>
                    <span className="drawer-item-sub mono">{i.collection} · .cube</span>
                  </div>
                  <span className="drawer-item-price">€{i.price}</span>
                  <button className="drawer-item-x" onClick={() => removeItem(idx)} aria-label="Remove">✕</button>
                </div>
              ))}
            </div>
            <div className="drawer-foot">
              <div className="drawer-total">
                <span className="mono">SUBTOTAL</span>
                <span className="drawer-total-num">€{total}</span>
              </div>
              <p className="drawer-note mono">Digital download · instant delivery</p>
              <Btn full onClick={checkout}>Checkout · €{total}</Btn>
            </div>
          </React.Fragment>
        )}
      </aside>
    </React.Fragment>
  );
}

function Checkout({ items, go, complete }) {
  const total = items.reduce((s, i) => s + i.price, 0);
  const [email, setEmail] = React.useState("");
  const [card, setCard] = React.useState("");
  const [method, setMethod] = React.useState("card");
  const valid = /\S+@\S+\.\S+/.test(email) && (method !== "card" || card.replace(/\s/g, "").length >= 12);

  if (items.length === 0) {
    return (
      <div className="page page-checkout">
        <div className="checkout-empty">
          <h1>Nothing to check out.</h1>
          <Btn onClick={() => go("shop")}>Browse the looks</Btn>
        </div>
      </div>
    );
  }

  return (
    <div className="page page-checkout">
      <button className="back mono" onClick={() => go("shop")}>← Keep shopping</button>
      <div className="checkout-grid">
        <div className="checkout-form">
          <h1 className="checkout-title">Checkout</h1>

          <div className="field">
            <label className="mono">EMAIL · where we send your files</label>
            <input
              type="email"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>

          <div className="pay-methods">
            {[["card", "Card"], ["paypal", "PayPal"], ["apple", "Apple Pay"]].map(([k, l]) => (
              <button key={k} className={"pay-method " + (method === k ? "is-active" : "")} onClick={() => setMethod(k)}>
                {l}
              </button>
            ))}
          </div>

          {method === "card" && (
            <div className="card-fields">
              <div className="field">
                <label className="mono">CARD NUMBER</label>
                <input
                  inputMode="numeric"
                  placeholder="4242 4242 4242 4242"
                  value={card}
                  onChange={(e) => setCard(e.target.value)}
                />
              </div>
              <div className="field-row">
                <div className="field"><label className="mono">EXPIRY</label><input placeholder="06 / 28" /></div>
                <div className="field"><label className="mono">CVC</label><input placeholder="123" /></div>
              </div>
            </div>
          )}
          {method !== "card" && (
            <p className="pay-redirect mono">You'll confirm with {method === "paypal" ? "PayPal" : "Apple Pay"} — prototype only.</p>
          )}

          <Btn full onClick={() => valid && complete()} className={valid ? "" : "is-disabled"}>
            Pay €{total} →
          </Btn>
          <p className="checkout-secure mono">🔒 Secure checkout · prototype, no real charge</p>
        </div>

        <aside className="checkout-summary">
          <span className="mono">ORDER</span>
          <div className="summary-items">
            {items.map((i, idx) => (
              <div className="summary-item" key={i.id + idx}>
                <span className="summary-sw" style={{ background: i.swatch }} />
                <span className="summary-name">{i.name}</span>
                <span className="summary-price">€{i.price}</span>
              </div>
            ))}
          </div>
          <div className="summary-line"><span className="mono">SUBTOTAL</span><span>€{total}</span></div>
          <div className="summary-line summary-total"><span className="mono">TOTAL</span><span>€{total}</span></div>
          <p className="summary-note mono">Instant digital delivery. Files never expire.</p>
        </aside>
      </div>
    </div>
  );
}

function Success({ items, go, resetCart }) {
  return (
    <div className="page page-success">
      <div className="success-inner">
        <span className="success-check">✓</span>
        <span className="eyebrow mono">Order confirmed</span>
        <h1 className="success-title">Your looks are ready.</h1>
        <p className="success-sub">
          We've emailed your download links too — they never expire.
        </p>
        <div className="success-downloads">
          {items.map((i, idx) => (
            <div className="download" key={i.id + idx}>
              <span className="download-sw" style={{ background: i.swatch }} />
              <div className="download-info">
                <span className="download-name">{i.name}</span>
                <span className="download-sub mono">{i.collection} · .cube + .look · LOG & Rec709</span>
              </div>
              <button className="download-btn mono" onClick={(e) => e.preventDefault()}>↓ DOWNLOAD</button>
            </div>
          ))}
        </div>
        <div className="success-next">
          <span className="mono">NEW TO LUTs?</span>
          <button onClick={() => { resetCart(); go("faq"); }}>Read the 60-second install guide →</button>
        </div>
        <Btn variant="ghost" onClick={() => { resetCart(); go("home"); }}>Back to home</Btn>
      </div>
    </div>
  );
}

function About({ go }) {
  return (
    <div className="page page-about">
      <div className="about-hero">
        <span className="eyebrow mono">About</span>
        <h1 className="about-title">I'm Farbod — I shoot the feeling, then I bottle it.</h1>
      </div>
      <div className="about-body">
        <div className="about-media"><Scene sceneKey="portrait" grade="daydream" /></div>
        <div className="about-text">
          <p>Farbodfilms started as a way to keep the looks I kept rebuilding on every shoot. Instead of grading from scratch each time, I turned my go-to looks into LUTs — so a single drag could take footage from flat to filmic.</p>
          <p>Every look here is graded by hand on real footage, not test charts. They're the exact tools I use on my own work, tuned to be forgiving for anyone just starting out.</p>
          <p>SS26 is the first season — two looks, <button className="inline-link" onClick={() => go("product:daydream")}>Daydream</button> and <button className="inline-link" onClick={() => go("product:afterlight")}>Afterlight</button>. New looks land every couple of seasons. This is just the beginning.</p>
        </div>
      </div>
    </div>
  );
}

function FAQ({ go }) {
  const steps = [
    { n: "01", t: "Download & unzip", d: "After checkout your .cube files download instantly. Unzip them anywhere on your drive." },
    { n: "02", t: "Import into your editor", d: "Premiere: Lumetri → Creative → browse. DaVinci: drop into your LUT folder. Final Cut: add a Custom LUT effect." },
    { n: "03", t: "Apply & dial it in", d: "Drop the LUT on your clip. Use the LOG version on LOG/flat footage, Rec709 on standard. Adjust intensity to taste." },
  ];
  const faqs = [
    { q: "Which editors do these work in?", a: "Premiere Pro, DaVinci Resolve, Final Cut Pro, Lightroom (still LUTs) and anything that reads .cube — which is almost everything." },
    { q: "LOG or Rec709 — which do I use?", a: "Every look ships with both. Use LOG if you shot in a flat/log profile; use Rec709 for standard footage straight from the camera." },
    { q: "Will these work on my phone footage?", a: "Yes. Use the Rec709 version — they're built to be forgiving on everything from cinema cameras to iPhone clips." },
    { q: "Do I get future updates?", a: "Buy a single look and it's yours forever. Buy the SS26 Collection and every new SS26 look arrives free as it drops." },
    { q: "Refunds?", a: "Because these are instant digital downloads they're non-refundable — but reach out any time if a file won't load and I'll sort you out." },
  ];
  return (
    <div className="page page-faq">
      <div className="faq-head">
        <span className="eyebrow mono">Install & FAQ</span>
        <h1 className="faq-title">From download to graded in 60 seconds.</h1>
      </div>
      <div className="faq-steps">
        {steps.map((s) => (
          <div className="faq-step" key={s.n}>
            <span className="faq-step-n mono">{s.n}</span>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
          </div>
        ))}
      </div>
      <div className="faq-list">
        {faqs.map((f, i) => <FaqItem key={i} f={f} />)}
      </div>
      <div className="faq-cta">
        <h2>Ready to grade?</h2>
        <Btn onClick={() => go("shop")}>Shop the SS26 looks →</Btn>
      </div>
    </div>
  );
}

function FaqItem({ f }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={"faq-item " + (open ? "is-open" : "")} onClick={() => setOpen(!open)}>
      <div className="faq-q">
        <span>{f.q}</span>
        <span className="faq-toggle">{open ? "–" : "+"}</span>
      </div>
      {open && <p className="faq-a">{f.a}</p>}
    </div>
  );
}

Object.assign(window, { CartDrawer, Checkout, Success, About, FAQ, FaqItem });