/* home.jsx — landing page with 3 tweakable hero directions */
(function () {
  const { useState } = React;
  const { cx, fmtTime, fmtDate, Logo, Difficulty, Stat, SmartImg, useReveal } = window;

  function HeroEditorial({ featured, go, openCmd }) {
    const { ArrowRight, Search, Clock } = window.Icons;
    const S = window.SITE;
    return (
      <section className="container" style={{ paddingTop: "clamp(2rem,5vw,4rem)", paddingBottom: "clamp(1.5rem,4vw,3rem)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: "clamp(1.5rem,4vw,3.5rem)", alignItems: "center" }} className="hero-grid">
          <div className="col" style={{ gap: "1.3rem" }}>
            <h1 className="h-display">Hi, I'm Amos —<br />and I really like to cook.</h1>
            <p className="lead" style={{ maxWidth: 440 }}>{S.about}</p>
            <div className="row wrap" style={{ gap: ".7rem", marginTop: ".3rem" }}>
              <button className="btn btn-primary btn-lg" onClick={() => go({ name: "section", section: "recipes" })}>
                Browse recipes <ArrowRight size={17} />
              </button>
              <button className="btn btn-outline btn-lg" onClick={openCmd}><Search size={16} /> Search</button>
            </div>
          </div>

          <button className="rcard" style={{ textAlign: "left" }} onClick={() => go({ name: "recipe", slug: featured.slug })}>
            <div className="rcard-media" style={{ aspectRatio: "5/4" }}>
              <SmartImg src={featured.image} alt={featured.title} label={featured.category} />
              <span className="badge badge-brand" style={{ position: "absolute", top: ".8rem", left: ".8rem" }}>Latest recipe</span>
            </div>
            <div className="col" style={{ padding: "1.1rem 1.2rem 1.25rem", gap: ".55rem" }}>
              <h3 className="h2" style={{ fontSize: "1.4rem" }}>{featured.title}</h3>
              <p className="muted" style={{ fontSize: ".94rem", textWrap: "pretty" }}>{featured.summary}</p>
              <div className="row wrap" style={{ gap: "1rem", marginTop: ".3rem" }}>
                <Stat icon={Clock}>{fmtTime(featured.total)}</Stat>
                <Difficulty level={featured.difficulty} />
              </div>
            </div>
          </button>
        </div>
      </section>
    );
  }

  function HeroPlate({ featured, go, openCmd }) {
    const { Search, Command } = window.Icons;
    const S = window.SITE;
    return (
      <section className="container" style={{ paddingTop: "clamp(2.5rem,6vw,5rem)", paddingBottom: "clamp(2rem,4vw,3rem)", textAlign: "center" }}>
        <div className="col" style={{ alignItems: "center", gap: "1.3rem", maxWidth: 640, margin: "0 auto" }}>
          <div style={{ filter: "drop-shadow(0 14px 30px rgb(20 18 10 / .16))" }}><Logo size={92} /></div>
          <span className="badge badge-brand">{S.status}</span>
          <h1 className="h-display" style={{ maxWidth: 620 }}>A private cookbook,<br />kept honest.</h1>
          <p className="lead" style={{ maxWidth: 480 }}>{S.tagline} This is where I keep recipes worth remembering — and share them when a friend asks.</p>
          <button className="input" onClick={openCmd}
            style={{ maxWidth: 420, height: "3.1rem", cursor: "pointer", color: "hsl(var(--muted-foreground))", boxShadow: "var(--shadow)" }}>
            <Search size={18} /><span style={{ flex: 1, textAlign: "left" }}>Search recipes, ingredients…</span>
            <span className="kbd"><Command size={11} />K</span>
          </button>
        </div>
      </section>
    );
  }

  function HeroGrid({ go }) {
    const S = window.SITE;
    return (
      <section className="container" style={{ paddingTop: "clamp(2rem,4vw,3.2rem)", paddingBottom: "1rem" }}>
        <div className="spread wrap" style={{ alignItems: "flex-end", gap: "1.2rem" }}>
          <div className="col" style={{ gap: ".7rem", maxWidth: 560 }}>
            <span className="eyebrow">Amos' kitchen</span>
            <h1 className="h-display" style={{ fontSize: "clamp(2rem,4vw,3rem)" }}>Everything I've been cooking.</h1>
            <p className="lead">{S.about}</p>
          </div>
        </div>
      </section>
    );
  }

  function Home({ go, openCmd, homeLayout }) {
    const ref = useReveal();
    const { ArrowRight, Sprout, Book } = window.Icons;
    const recipes = [...window.RECIPES].sort((a, b) => new Date(b.date) - new Date(a.date));
    const featured = recipes[0];
    const latest = recipes.slice(0, 6);
    const { RecipeCard } = window;

    return (
      <div className="page" ref={ref}>
        {homeLayout === "plate" && <HeroPlate featured={featured} go={go} openCmd={openCmd} />}
        {homeLayout === "grid" && <HeroGrid go={go} />}
        {(!homeLayout || homeLayout === "editorial") && <HeroEditorial featured={featured} go={go} openCmd={openCmd} />}

        {/* Latest recipes */}
        <section className="container" style={{ paddingBlock: "clamp(2rem,4vw,3rem)" }}>
          <div className="spread" style={{ marginBottom: "1.4rem" }}>
            <div className="col" style={{ gap: ".2rem" }}>
              <span className="eyebrow">Fresh from the kitchen</span>
              <h2 className="h2">Latest recipes</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => go({ name: "section", section: "recipes" })}>
              View all <ArrowRight size={16} />
            </button>
          </div>
          <div className="grid-recipes stagger">
            {(homeLayout === "grid" ? recipes : latest).map((r, idx) => <RecipeCard key={r.slug} recipe={r} go={go} idx={idx} />)}
          </div>
        </section>

        {/* Sections */}
        <section className="container" style={{ paddingBottom: "clamp(2rem,4vw,3rem)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: "1.2rem" }}>
            {[
              { key: "ingridients", icon: Sprout, title: "Ingredients", blurb: window.SECTIONS.ingridients.blurb, count: window.ARTICLES.filter((a) => a.section === "ingridients").length },
              { key: "techniques", icon: Book, title: "Techniques", blurb: window.SECTIONS.techniques.blurb, count: window.ARTICLES.filter((a) => a.section === "techniques").length },
            ].map((s) => {
              const Ico = s.icon;
              return (
                <button key={s.key} className="card card-pad reveal" style={{ textAlign: "left", transition: "border-color .2s ease, transform .2s ease" }}
                  onClick={() => go({ name: "section", section: s.key })}
                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--brand-line)"; e.currentTarget.style.transform = "translateY(-3px)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = "hsl(var(--border))"; e.currentTarget.style.transform = "none"; }}>
                  <div className="spread" style={{ alignItems: "flex-start" }}>
                    <span style={{ width: "2.6rem", height: "2.6rem", borderRadius: ".7rem", background: "var(--brand-soft)", color: "color-mix(in srgb, var(--brand) 70%, hsl(var(--foreground)))", display: "grid", placeContent: "center" }}><Ico size={22} /></span>
                    <span className="badge badge-outline">{s.count} {s.count === 1 ? "entry" : "entries"}</span>
                  </div>
                  <h3 className="h3" style={{ marginTop: "1rem" }}>{s.title}</h3>
                  <p className="muted" style={{ fontSize: ".92rem", marginTop: ".35rem", textWrap: "pretty" }}>{s.blurb}</p>
                  <span className="row" style={{ gap: ".4rem", marginTop: "1rem", fontWeight: 500, fontSize: ".9rem", color: "color-mix(in srgb, var(--brand) 65%, hsl(var(--foreground)))" }}>
                    Explore <ArrowRight size={15} />
                  </span>
                </button>
              );
            })}
          </div>
        </section>
      </div>
    );
  }

  Object.assign(window, { Home });
})();