/* GMC FONT — Home page (with 2 hero variants) */

function Home({ hero = "v1" }) {
  return (
    <div data-screen-label="Home">
      {hero === "v1" ? <HeroV1/> : <HeroV2/>}
      <FeaturedSection/>
      <HotSection/>
      <NewSection/>
    </div>
  );
}

/* Hero v1 — playful confetti */
function HeroV1() {
  const r = useRoute();
  return (
    <section className="hero1">
      <div className="hero1-art" aria-hidden="true">
        <video className="hero1-video" src="bg.mp4" autoPlay muted loop playsInline/>
      </div>
      <div className="hero1-inner">
        <div className="hero1-copy">
          <div className="hero1-crumbs">
            <span>ฟอนต์ไทย</span>
            <span>|</span>
            <span>ฟอนต์อังกฤษ</span>
            <span>|</span>
            <span>ไลเซนส์พร้อมใช้</span>
          </div>
          <h1>ฟอนต์ไทยน่ารัก<br/>สำหรับงานสร้างสรรค์</h1>
          <p className="sub">
            เลือกฟอนต์ไทย-อังกฤษจาก gmcfontverse ทดลองพิมพ์ก่อนซื้อ
            แล้วดาวน์โหลดไปใช้กับแบรนด์ โพสต์ และงานลูกค้าได้ทันที
          </p>
          <div className="ctas">
            <button className="btn coral lg" onClick={() => r.go("fonts")}>
              เลือกฟอนต์ <Icon name="arrow-r" size={16}/>
            </button>
            <button className="btn lg" onClick={() => r.go("detail", "khanom")}>
              ลองฟอนต์ขายดี
            </button>
          </div>
          <div className="hero1-trust">
            <span><Icon name="check" size={14}/> ทดลองพิมพ์ก่อนซื้อ</span>
            <span><Icon name="lock" size={14}/> ใช้เชิงพาณิชย์ได้</span>
            <span><Icon name="download" size={14}/> ดาวน์โหลดหลังชำระ</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Hero v2 — 5-color band */
function HeroV2() {
  const r = useRoute();
  const cells = [
    { color: "var(--butter)", hex:"#FFE189", word:"Aa", name:"Sunburst",   ff:"'Caprasimo', serif" },
    { color: "var(--mint)",   hex:"#B5E8C8", word:"ขน", name:"Khanom",     ff:"'Mali', sans-serif" },
    { color: "var(--pink)",   hex:"#FF9EBB", word:"Yum",name:"Popcorn",    ff:"'Lilita One', cursive" },
    { color: "var(--peach)",  hex:"#FFCBA8", word:"สวัส",name:"Look Om",   ff:"'Sriracha', cursive" },
    { color: "var(--sky)",    hex:"#B8DCF5", word:"Ho", name:"Honeydew",   ff:"'Fraunces', serif", italic: true },
  ];
  return (
    <section className="hero2">
      <div className="hero2-headline">
        <div>
          <span className="sticker coral">🌈 gmcfontverse 2026</span>
          <h1 style={{marginTop:12}}>180+ ฟอนต์ไทย-อังกฤษ<br/>ที่ทำให้งานคุณ <span className="hl">น่ารัก</span>ขึ้น</h1>
        </div>
        <div style={{display:"flex", flexDirection:"column", gap:14}}>
          <p style={{color:"var(--ink-soft)", margin:0}}>
            ทดลองพิมพ์ก่อนซื้อ ดาวน์โหลดทันที ใช้ได้ทั้งงานส่วนตัวและเชิงพาณิชย์
          </p>
          <div style={{display:"flex", gap:10, flexWrap:"wrap"}}>
            <button className="btn coral" onClick={() => r.go("fonts")}>เลือกฟอนต์ <Icon name="arrow-r" size={14}/></button>
            <button className="btn">ดูราคา</button>
          </div>
        </div>
      </div>
      <div className="hero2-band">
        {cells.map((c, i) => (
          <div key={i} className="hero2-cell" style={{background: c.color}}>
            <div className="eyebrow">{String(i+1).padStart(2,"0")} / 05</div>
            <div className="sample" style={{fontFamily: c.ff, fontStyle: c.italic ? "italic" : "normal"}}>{c.word}</div>
            <div className="meta">
              <b>{c.name}</b>
              <span className="hex">{c.hex}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* Categories */
function Categories() {
  const r = useRoute();
  const fonts = useFonts();
  // pick a curated set of 12 from the new collections
  const featuredIds = ["kokoo","khanomthai","cocktail","tomyum","bakery","popcorn","polmai","signature","bedroom","thaifood","cuteflower","cutiebelle"];
  const cats = featuredIds
    .map(id => CATEGORIES.find(c => c.id === id))
    .filter(Boolean)
    .map(c => ({
      ...c,
      count: fonts.filter(f => f.collection === c.id).length,
    }))
    .filter(c => c.count > 0);
  return (
    <section className="section-tight">
      <div className="container">
        <div className="sec-head">
            <h2 className="title display">หมวดฟอนต์</h2>
            <p className="desc">คอลเลกชั่นยอดนิยมจาก gmcfontverse</p>
        </div>
        <div className="cat-grid">
          {cats.map(c => (
            <div key={c.id} className="cat" style={{background:`var(--${c.color})`, color: ["coral","lilac","pink","sky"].includes(c.color) ? "var(--white)" : "var(--ink)"}}
                 onClick={() => r.go("fonts", `cat=${c.id}`)}>
              <div className="cat-name">{c.th}</div>
              <div className="cat-count" style={{color: ["coral","lilac","pink","sky"].includes(c.color) ? "rgba(255,255,255,.85)" : "var(--ink-soft)"}}>{c.count} ฟอนต์</div>
            </div>
          ))}
        </div>
        <div style={{textAlign:"center", marginTop:28}}>
          <button className="btn" onClick={() => r.go("fonts")}>
            ดูทุกหมวด ({CATEGORIES.length - 1}) <Icon name="arrow-r" size={14}/>
          </button>
        </div>
      </div>
    </section>
  );
}

/* Featured (สินค้าแนะนำ) — big asymmetric */
function FeaturedSection() {
  const r = useRoute();
  const fonts = useFonts();
  const featured = fonts.slice(0, 4);
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="eyebrow">★ Editor's Pick ★</span>
            <h2 className="title display" style={{marginTop:8}}>สินค้าแนะนำ</h2>
          </div>
          <p className="desc">ฟอนต์ที่ทีม gmcfontverse คัดเองทุกเดือน — ทั้งใหม่และคลาสสิก</p>
        </div>
        <div className="grid-4">
          {featured.map(f => (
            <FontCard key={f.id} font={f}/>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Hot section */
function HotSection() {
  const r = useRoute();
  const fonts = useFonts();
  const hot = fonts.filter(f => f.hot).slice(0, 6);
  return (
    <section className="section-tight" style={{background:"var(--paper)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="sticker coral">🔥 มาแรง</span>
            <h2 className="title display" style={{marginTop:8}}>ฟอนต์ยอดฮิต</h2>
          </div>
          <button className="btn" onClick={() => r.go("fonts", "cat=hot")}>
            ดูทั้งหมด <Icon name="arrow-r" size={14}/>
          </button>
        </div>
        <div className="grid-4">
          {hot.map(f => <FontCard key={f.id} font={f}/>)}
        </div>
      </div>
    </section>
  );
}

/* New section */
function NewSection() {
  const r = useRoute();
  const fonts = useFonts();
  const news = fonts.filter(f => f.new).slice(0, 6);
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="sticker lemon">✦ มาใหม่</span>
            <h2 className="title display" style={{marginTop:8}}>ฟอนต์มาใหม่</h2>
          </div>
          <button className="btn" onClick={() => r.go("fonts", "cat=new")}>
            ดูทั้งหมด <Icon name="arrow-r" size={14}/>
          </button>
        </div>
        <div className="grid-4">
          {news.map(f => <FontCard key={f.id} font={f}/>)}
        </div>
      </div>
    </section>
  );
}

/* Pair banner */
function FontPairsBanner() {
  return (
    <section className="section-tight">
      <div className="container">
        <div style={{
          border:"1px solid var(--line)", borderRadius:28, padding:48,
          background: "var(--lime)", boxShadow:"none",
          display:"grid", gridTemplateColumns:"1fr 1fr", gap:32, alignItems:"center"
        }}>
          <div>
            <span className="sticker">ไกด์การใช้งาน</span>
            <h2 className="display" style={{fontSize:56, margin:"16px 0", lineHeight:1}}>คู่ฟอนต์<br/>ที่เข้ากัน</h2>
            <p style={{color:"var(--ink-soft)", maxWidth:380}}>
              เราจับคู่ Display + Body ที่เข้ากันให้ พร้อมตัวอย่างใช้งานจริง
            </p>
            <button className="btn coral" style={{marginTop:16}}>เปิดไกด์ <Icon name="arrow-r" size={14}/></button>
          </div>
          <div style={{display:"grid", gap:14}}>
            {[
              {a:"Sunburst", afam:"'Caprasimo', serif", b:"Coconut Sans", bfam:"'Mitr', sans-serif", bg:"var(--lemon)"},
              {a:"Popcorn",  afam:"'Lilita One', cursive", b:"Yenta",     bfam:"'Bai Jamjuree', sans-serif", bg:"var(--white)"},
              {a:"Lamoon",   afam:"'Charm', serif",     b:"Minimoon",     bfam:"'Pridi', serif", bg:"var(--coral)", color:"var(--white)"},
            ].map((p,i)=>(
              <div key={i} className="card" style={{padding:18, background:p.bg, color:p.color||"var(--ink)", display:"flex", alignItems:"center", gap:16}}>
                <div style={{fontFamily:p.afam, fontSize:36, lineHeight:1}}>Aa</div>
                <div style={{fontFamily:p.bfam, fontSize:24, opacity:.85, lineHeight:1}}>Aa</div>
                <div style={{marginLeft:"auto", textAlign:"right", fontSize:13}}>
                  <div style={{fontWeight:500}}>{p.a} + {p.b}</div>
                  <div style={{opacity:.7}}>Display + Body</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* Newsletter wrapper */
function NewsletterSection() {
  return <section className="section"><div className="container"><NewsletterCard/></div></section>;
}

/* Brands logos */
function BrandsSection() {
  const brands = [
    {n:"Mango.Co", f:"'Caprasimo', serif"},
    {n:"banana", f:"'Fredoka', sans-serif"},
    {n:"OOMI", f:"'Bowlby One', sans-serif"},
    {n:"กล้วยหอม", f:"'Mali', sans-serif"},
    {n:"strawb.", f:"'Itim', cursive"},
    {n:"PEACH", f:"'Lilita One', cursive"},
  ];
  return (
    <section className="section-tight" style={{borderTop:"1px solid var(--line)", background:"var(--white)"}}>
      <div className="container">
        <div style={{textAlign:"center", marginBottom:32}}>
          <span className="eyebrow">เลือกใช้โดย 500+ แบรนด์</span>
        </div>
        <div style={{display:"flex", justifyContent:"space-around", alignItems:"center", flexWrap:"wrap", gap:32}}>
          {brands.map(b => (
            <div key={b.n} style={{fontFamily:b.f, fontSize:36, color:"var(--ink-soft)", opacity:.7}}>{b.n}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

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