/* ===== Gift Guides Index ===== */

const GiftsIndex = ({ go }) => {
  const [occasion, setOccasion] = React.useState("all");
  const [age, setAge] = React.useState("all");
  const [price, setPrice] = React.useState("all");

  const occasions = ["all", "christmas", "birthday", "baby-shower", "easter", "valentines", "mothers-day"];
  const ages = ["all", "newborn", "0-12mo", "1-2yr", "toddler", "3-5yr", "6-8yr", "9-12yr"];
  const prices = ["all", "under-25", "under-50", "under-100", "splurge"];

  const guides = [
    { title: "Christmas for a 2-year-old", sub: "under $50", tone: "pink", count: 18, url: "/gifts/christmas/2-year-old/under-50" },
    { title: "Baby shower · thoughtful picks", sub: "under $100", tone: "sage", count: 22, url: "/gifts/baby-shower/newborn/under-100" },
    { title: "5th birthday · big-kid gear", sub: "under $25", tone: "butter", count: 14, url: "/gifts/birthday/5-year-old/under-25" },
    { title: "Easter baskets without sugar", sub: "under $25", tone: "pink", count: 16, url: "/gifts/easter/toddler/under-25" },
    { title: "Mother's Day from kids", sub: "under $50", tone: "navy", count: 12, url: "/gifts/mothers-day/any/under-50" },
    { title: "First-birthday splurge", sub: "the good stuff", tone: "butter", count: 10, url: "/gifts/birthday/1-year-old/splurge" },
    { title: "Valentine's for little hearts", sub: "under $25", tone: "pink", count: 8, url: "/gifts/valentines/any/under-25" },
    { title: "3-year-old birthday · under $50", sub: "under $50", tone: "sage", count: 20, url: "/gifts/birthday/3-year-old/under-50" },
  ];

  return (
    <div>
      <section style={{padding: "60px 32px 40px"}}>
        <div className="container">
          <div className="eyebrow" style={{marginBottom: 24}}>Gift guides</div>
          <h1 className="display" style={{fontSize: "clamp(48px, 7vw, 112px)", margin: 0, color: "var(--navy)"}}>
            Every guide we've <br/>
            <span style={{fontStyle: "italic"}}>ever</span>
            <span className="script" style={{color: "var(--pink-deep)", marginLeft: 20}}>made.</span>
          </h1>
          <p style={{maxWidth: 640, fontSize: 19, color: "var(--ink-soft)", marginTop: 30}}>
            Pick an occasion, an age, a budget — or type what you need and we'll build you a guide on the spot.
          </p>
        </div>
      </section>

      {/* Filter bar */}
      <section style={{padding: "20px 32px 30px", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", position: "sticky", top: 81, background: "var(--bg)", zIndex: 10}}>
        <div className="container" style={{display: "flex", gap: 40, alignItems: "center", flexWrap: "wrap"}}>
          <FilterRow label="Occasion" options={occasions} value={occasion} onChange={setOccasion}/>
          <FilterRow label="Age" options={ages} value={age} onChange={setAge}/>
          <FilterRow label="Budget" options={prices} value={price} onChange={setPrice}/>
          <button className="btn pink tiny arrow" style={{marginLeft: "auto"}} onClick={() => go("guide")}>Build my guide</button>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="allcaps" style={{color: "var(--ink-muted)", marginBottom: 24}}>{guides.length} guides matching — newest first</div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28}}>
            {guides.map((g, i) => (
              <div key={i} onClick={() => go("guide")} style={{cursor: "pointer"}}>
                <div className={"ph " + g.tone} style={{aspectRatio: "3/4", borderRadius: 4, position: "relative", overflow: "hidden"}}>
                  <div style={{position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 30%, rgba(27,58,92,0.75))"}}/>
                  <div style={{position: "absolute", top: 14, left: 14, fontFamily: "var(--f-mono)", fontSize: 10, color: "white", background: "rgba(0,0,0,0.3)", padding: "3px 7px", borderRadius: 2}}>{g.url}</div>
                  <div style={{position: "absolute", bottom: 20, left: 20, right: 20, color: "white"}}>
                    <div className="display" style={{fontSize: 26, lineHeight: 1.05}}>{g.title}</div>
                    <div style={{marginTop: 8, fontFamily: "var(--f-ui)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.9, display: "flex", justifyContent: "space-between"}}>
                      <span>{g.sub}</span>
                      <span>{g.count} picks</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div style={{margin: "80px 0 40px", padding: 40, border: "1.5px dashed var(--rule)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 40, flexWrap: "wrap"}}>
            <div>
              <div className="eyebrow" style={{marginBottom: 10}}>Don't see what you need?</div>
              <h3 className="display" style={{fontSize: 36, margin: 0, color: "var(--navy)"}}>We'll build a guide for you.</h3>
              <p style={{marginTop: 10, color: "var(--ink-soft)", maxWidth: 540}}>Tell us the occasion, age, and budget — a fresh guide appears in seconds, written by Rebecca or Priya.</p>
            </div>
            <button className="btn primary arrow" onClick={() => go("finder")}>Try the gift finder</button>
          </div>
        </div>
      </section>
    </div>
  );
};

const FilterRow = ({ label, options, value, onChange }) => (
  <div>
    <div className="allcaps" style={{color: "var(--ink-muted)", marginBottom: 8}}>{label}</div>
    <div style={{display: "flex", gap: 6, flexWrap: "wrap"}}>
      {options.map(o => (
        <button key={o} onClick={() => onChange(o)} style={{
          padding: "6px 12px", borderRadius: 999, cursor: "pointer",
          fontFamily: "var(--f-ui)", fontSize: 12,
          border: "1px solid " + (value === o ? "var(--navy)" : "var(--rule)"),
          background: value === o ? "var(--navy)" : "transparent",
          color: value === o ? "var(--cream)" : "var(--navy)",
          textTransform: o === "all" ? "none" : "capitalize",
        }}>{o.replace(/-/g, " ")}</button>
      ))}
    </div>
  </div>
);

Object.assign(window, { GiftsIndex });