/* ZestPlus — Apparel · PullQuote · Testimonials · FinalCTA · Footer */

/* ---------------------------- Garment SVGs ---------------------------- */
function Singlet({ color1 = "#c7ff3d", color2 = "#7fb800", logo = "#0a0a0b" }) {
  return (
    <svg viewBox="0 0 220 280" className="w-full h-full">
      <defs>
        <linearGradient id="sg1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor={color1}/><stop offset="100%" stopColor={color2}/></linearGradient>
      </defs>
      {/* singlet body */}
      <path d="M70 40 L60 60 L40 70 L40 250 L80 260 L110 252 L140 260 L180 250 L180 70 L160 60 L150 40 L130 50 L110 56 L90 50 Z" fill="url(#sg1)" stroke="rgba(0,0,0,0.18)" strokeWidth="1.2"/>
      {/* neckline */}
      <path d="M85 42 Q110 70 135 42" fill="none" stroke="rgba(0,0,0,0.25)" strokeWidth="2"/>
      {/* mesh dots */}
      <g fill="rgba(255,255,255,0.18)">
        {Array.from({length:30}).map((_,i)=><circle key={i} cx={55+(i%6)*22} cy={100+Math.floor(i/6)*30} r="1.5"/>)}
      </g>
      {/* logo */}
      <g transform="translate(95,150)">
        <rect x="0" y="0" width="32" height="32" rx="9" fill={logo}/>
        <path d="M9 11 H22 L12 22 H23" fill="none" stroke={color1} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </g>
    </svg>
  );
}
function Shorts({ color1 = "#22c55e", color2 = "#065f46", logo = "#fafafa" }) {
  return (
    <svg viewBox="0 0 220 280" className="w-full h-full">
      <defs><linearGradient id="sho1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={color1}/><stop offset="100%" stopColor={color2}/></linearGradient></defs>
      <path d="M40 50 L40 220 L100 240 L110 130 L120 240 L180 220 L180 50 Z" fill="url(#sho1)" stroke="rgba(0,0,0,0.18)" strokeWidth="1.2"/>
      <rect x="40" y="50" width="140" height="14" fill="rgba(0,0,0,0.25)"/>
      <g transform="translate(150,75)"><circle r="11" fill={logo} opacity=".95"/><path d="M-4 -5 H7 L-3 7 H8" fill="none" stroke={color2} strokeWidth="1.6" strokeLinecap="round"/></g>
    </svg>
  );
}
function CropTop({ color1 = "#a78bfa", color2 = "#6d28d9", logo = "#fafafa" }) {
  return (
    <svg viewBox="0 0 220 280" className="w-full h-full">
      <defs><linearGradient id="ct1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor={color1}/><stop offset="100%" stopColor={color2}/></linearGradient></defs>
      <path d="M70 70 L55 90 L55 200 L110 215 L165 200 L165 90 L150 70 L130 80 L110 84 L90 80 Z" fill="url(#ct1)" stroke="rgba(0,0,0,0.18)" strokeWidth="1.2"/>
      <path d="M85 72 Q110 100 135 72" fill="none" stroke="rgba(0,0,0,0.25)" strokeWidth="2"/>
      {/* gradient stripe */}
      <rect x="55" y="140" width="110" height="14" fill="rgba(255,255,255,0.18)"/>
      <g transform="translate(98,165)"><rect width="22" height="22" rx="6" fill={logo}/><path d="M6 8 H17 L7 18 H18" stroke={color2} strokeWidth="1.6" fill="none" strokeLinecap="round"/></g>
    </svg>
  );
}
function Jacket({ color1 = "#0a0a0b", color2 = "#27272a", logo = "#c7ff3d" }) {
  return (
    <svg viewBox="0 0 220 280" className="w-full h-full">
      <defs><linearGradient id="ja1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor={color1}/><stop offset="100%" stopColor={color2}/></linearGradient></defs>
      <path d="M60 50 L30 70 L20 240 L70 255 L80 100 L80 240 L110 250 L140 240 L140 100 L150 255 L200 240 L190 70 L160 50 L130 75 L110 80 L90 75 Z" fill="url(#ja1)" stroke="rgba(0,0,0,0.4)" strokeWidth="1.2"/>
      <line x1="110" y1="80" x2="110" y2="250" stroke={logo} strokeWidth="1.2" strokeDasharray="3 3"/>
      <g transform="translate(140,120)"><rect width="22" height="22" rx="6" fill={logo}/><path d="M6 8 H17 L7 18 H18" stroke={color1} strokeWidth="1.6" fill="none" strokeLinecap="round"/></g>
    </svg>
  );
}
function Tshirt({ color1 = "#f59e0b", color2 = "#b45309", logo = "#0a0a0b" }) {
  return (
    <svg viewBox="0 0 220 280" className="w-full h-full">
      <defs><linearGradient id="ts1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor={color1}/><stop offset="100%" stopColor={color2}/></linearGradient></defs>
      <path d="M70 50 L40 80 L25 130 L60 145 L60 250 L160 250 L160 145 L195 130 L180 80 L150 50 L130 70 L110 76 L90 70 Z" fill="url(#ts1)" stroke="rgba(0,0,0,0.18)" strokeWidth="1.2"/>
      <path d="M85 52 Q110 82 135 52" fill="none" stroke="rgba(0,0,0,0.25)" strokeWidth="2"/>
      <g transform="translate(98,145)"><rect width="24" height="24" rx="7" fill={logo}/><path d="M7 9 H18 L8 19 H19" stroke={color1} strokeWidth="1.6" fill="none" strokeLinecap="round"/></g>
    </svg>
  );
}
const Garment = { Singlet, Shorts, CropTop, Jacket, Tshirt };

/* ---------------------------- Apparel --------------------------------- */
function ProductCard({ Item, bg1, bg2, name, sub, price, tag, colors = [], featured = false }) {
  const [variant, setVariant] = useState(0);
  return (
    <div className={`group relative overflow-hidden rounded-3xl glass ring-grad transition-all duration-300 hover:-translate-y-1 ${featured?"h-full":""}`}>
      <div className="relative overflow-hidden" style={{aspectRatio: featured ? "1/1.2" : "1/1.1", background:`linear-gradient(160deg, ${bg1}, ${bg2})`}}>
        {/* subtle grid */}
        <svg className="absolute inset-0 w-full h-full opacity-40" viewBox="0 0 100 100" preserveAspectRatio="none">
          <defs><pattern id={`gp-${name}`} width="10" height="10" patternUnits="userSpaceOnUse"><path d="M0 5h10M5 0v10" stroke="rgba(255,255,255,0.05)" strokeWidth="0.4"/></pattern></defs>
          <rect width="100" height="100" fill={`url(#gp-${name})`}/>
        </svg>
        {/* product */}
        <div className="absolute inset-0 grid place-items-center p-8">
          <div className="w-[68%] aspect-[220/280] drop-shadow-[0_20px_30px_rgba(0,0,0,0.45)] transition-transform duration-500 group-hover:scale-105">
            <Item color1={colors[variant]?.[0]} color2={colors[variant]?.[1]} />
          </div>
        </div>
        {/* tag */}
        {tag && (
          <div className="absolute top-4 left-4">
            <span className="inline-flex items-center rounded-full px-2.5 py-1 text-[10.5px] font-semibold tracking-wide" style={{background:"#0a0a0b", color:"var(--accent)", border:"1px solid color-mix(in oklab, var(--accent) 35%, transparent)"}}>{tag}</span>
          </div>
        )}
        {/* color dots */}
        {colors.length>1 && (
          <div className="absolute bottom-4 left-4 flex items-center gap-1.5">
            {colors.map((c,i)=>(
              <button key={i} onClick={()=>setVariant(i)}
                aria-label={`Variant ${i+1}`}
                className={`rounded-full transition-all ${variant===i?"ring-2":""}`}
                style={{width:18, height:18, background:`linear-gradient(135deg, ${c[0]}, ${c[1]})`, boxShadow: variant===i?"0 0 0 2px #0a0a0b, 0 0 0 4px var(--accent)":"inset 0 0 0 1px rgba(0,0,0,0.4)"}}/>
            ))}
          </div>
        )}
      </div>
      <div className="p-4 md:p-5">
        <div className="flex items-start justify-between gap-3">
          <div>
            <div className="font-display font-semibold text-[16px]">{name}</div>
            <div className="text-[12.5px] text-fg3 mt-0.5">{sub}</div>
          </div>
          <div className="text-right">
            <div className="font-display font-semibold text-[16px]">{price}</div>
            <div className="text-[11px] text-fg3">USD</div>
          </div>
        </div>
        <div className="mt-4 flex items-center gap-2">
          <button className="flex-1 btn btn-ghost !py-2 text-[12.5px] justify-center"><Icon name="plus" size={13}/> Add to bag</button>
          <button className="btn btn-primary !py-2 !px-3 text-[12.5px]" aria-label="Quick view"><Icon name="arrowRight" size={13}/></button>
        </div>
      </div>
    </div>
  );
}

function Apparel(){
  return (
    <Section id="apparel" className="relative">
      <OrbField orbs={[
        { right:"-6%", top:"15%", size:420, blur:110, opacity:.3, bg:"radial-gradient(closest-side, rgba(199,255,61,0.4), transparent 70%)" },
      ]}/>
      <Container className="relative">
        <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6">
          <div>
            <Reveal><Eyebrow>The uniform of the movement</Eyebrow></Reveal>
            <Reveal delay={100}>
              <h2 className="h-section text-[44px] md:text-[64px] mt-4">
                Wear the <span className="text-gradient-lime">movement.</span>
              </h2>
            </Reveal>
            <Reveal delay={180}>
              <p className="mt-5 text-[17px] text-fg2 max-w-[58ch]">
                Made in Indonesia. Quick-dry, breathable, built for the way Jakarta moves. Every purchase funds free crew memberships for movers under 22.
              </p>
            </Reveal>
          </div>
          <Reveal delay={240}>
            <a className="btn btn-ghost text-[13px]">Shop the collection <Icon name="arrowRight" size={14}/></a>
          </Reveal>
        </div>

        {/* Grid: featured + 4 */}
        <div className="mt-14 grid md:grid-cols-12 gap-5">
          <Reveal className="md:col-span-6">
            <ProductCard
              Item={Garment.Singlet} name="Run Singlet" sub="Quick-dry · 4-way stretch" price="$35" tag="New"
              bg1="#1a2b1a" bg2="#0a120a"
              colors={[["#c7ff3d","#7fb800"],["#22c55e","#065f46"],["#ef4444","#9f1239"],["#0a0a0b","#27272a"]]}
              featured
            />
          </Reveal>
          <div className="md:col-span-6 grid grid-cols-2 gap-5">
            <Reveal delay={80}>
              <ProductCard
                Item={Garment.Shorts} name="Train Shorts" sub="Ergonomic seams" price="$35"
                bg1="#0d1f17" bg2="#06120e"
                colors={[["#22c55e","#065f46"],["#0a0a0b","#27272a"],["#60a5fa","#1d4ed8"]]}
              />
            </Reveal>
            <Reveal delay={160}>
              <ProductCard
                Item={Garment.CropTop} name="Court Crop" sub="Breathable mesh" price="$32"
                bg1="#1e1530" bg2="#0e0a18"
                colors={[["#a78bfa","#6d28d9"],["#f472b6","#9d174d"],["#c7ff3d","#7fb800"]]}
              />
            </Reveal>
            <Reveal delay={240}>
              <ProductCard
                Item={Garment.Tshirt} name="Crew Tee" sub="Heavy cotton · embroidered" price="$28"
                bg1="#2b1d0c" bg2="#1a1108"
                colors={[["#f59e0b","#b45309"],["#0a0a0b","#27272a"],["#fafafa","#a1a1aa"]]}
              />
            </Reveal>
            <Reveal delay={320}>
              <ProductCard
                Item={Garment.Jacket} name="Crew Jacket" sub="Wind-resistant · packable" price="$55" tag="Members"
                bg1="#101013" bg2="#050507"
                colors={[["#0a0a0b","#27272a"],["#22c55e","#065f46"]]}
              />
            </Reveal>
          </div>
        </div>

        {/* Apparel features strip */}
        <div className="mt-12 grid md:grid-cols-4 gap-4">
          {[
            {ic:"check",   t:"Made in Bandung", d:"Local mill partners since 2024"},
            {ic:"sparkle", t:"Members save 20%", d:"Zest points apply at checkout"},
            {ic:"shield",  t:"30-day fit guarantee", d:"Free returns across SEA"},
            {ic:"heart",   t:"1% to youth crews",   d:"Every order funds memberships"},
          ].map((f,i)=>(
            <Reveal key={i} delay={i*80}>
              <div className="glass rounded-2xl p-4 h-full flex items-start gap-3">
                <div className="grid place-items-center rounded-xl shrink-0" style={{width:32, height:32, background:"var(--bg-card-2)", border:"1px solid var(--line)"}}>
                  <Icon name={f.ic} size={15} color="var(--accent)"/>
                </div>
                <div className="leading-tight">
                  <div className="text-[13.5px] font-display font-semibold">{f.t}</div>
                  <div className="text-[12px] text-fg3 mt-0.5">{f.d}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* ---------------------------- Pull Quote ------------------------------ */
function PullQuote(){
  return (
    <Section className="relative overflow-hidden">
      <OrbField orbs={[
        { left:"50%", top:"50%", size:760, blur:140, opacity:.5, bg:"radial-gradient(closest-side, rgba(199,255,61,0.35), transparent 70%)" },
      ]} className="-translate-x-1/2 -translate-y-1/2"/>
      <div className="absolute inset-0 grid-bg pointer-events-none opacity-50" aria-hidden="true"/>
      <Container className="relative text-center">
        <Reveal>
          <Eyebrow className="!justify-center">From the ZestPlus manifesto</Eyebrow>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="h-display text-[44px] md:text-[80px] lg:text-[92px] mt-6 leading-[0.96] max-w-[18ch] mx-auto">
            Solo fitness is a chore. <span className="text-gradient-lime">Together it&apos;s a ritual.</span>
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <div className="mt-10 flex flex-wrap items-center justify-center gap-8">
            <div className="flex items-center gap-3">
              <div className="font-display font-semibold text-[32px] text-gradient-lime"><Counter to={3.2} format={(v)=>v.toFixed(1)+"×"}/></div>
              <div className="text-left text-[12.5px] text-fg3 max-w-[20ch]">retention vs. solo wellness apps</div>
            </div>
            <Divider className="hidden md:block !w-px !h-10"/>
            <div className="flex items-center gap-3">
              <div className="font-display font-semibold text-[32px] text-gradient-lime"><Counter to={87} suffix="%"/></div>
              <div className="text-left text-[12.5px] text-fg3 max-w-[20ch]">join a 2nd crew within 30 days</div>
            </div>
            <Divider className="hidden md:block !w-px !h-10"/>
            <div className="flex items-center gap-3">
              <div className="font-display font-semibold text-[32px] text-gradient-lime"><Counter to={94} suffix="%"/></div>
              <div className="text-left text-[12.5px] text-fg3 max-w-[20ch]">say they're more consistent on Zest+</div>
            </div>
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

/* ---------------------------- Testimonials --------------------------- */
function Testimonials(){
  const items = [
    { who:"Maya Putri",   role:"Captain · Crew Sunrise 5K",  city:"Jakarta",   q:"Found my running family on Zest+. Haven't missed a Saturday in six months. The leaderboard nudges me out of bed every Monday." },
    { who:"Rico Tanu",    role:"Smash Club · Tangerang",     city:"Tangerang", q:"Match scheduling killed our group-chat chaos. Booked. Balanced. Bill split. We just play now." },
    { who:"Aisyah Kamal", role:"Mindful Mornings",            city:"Bali",      q:"Finally a wellness app that understands Indonesian fitness culture. The Indo crews are real, not algorithmic." },
    { who:"Danny Fadly",  role:"Lifters Anonymous",           city:"Surabaya",  q:"I'm 12kg down and I have 14 new friends. The kind that text you when you skip a Tuesday." },
    { who:"Hana Wijaya",  role:"Bike Bandung",                city:"Bandung",   q:"Effort-scored leaderboards mean I — a slow beginner — actually compete. That's a quiet kind of magic." },
    { who:"Jaya Ramli",   role:"Padel Pop-up",                city:"Jakarta",   q:"The apparel costs less than my coffee budget and looks better than anything in Pacific Place. Worth it." },
  ];
  return (
    <Section id="testimonials" className="relative">
      <Container>
        <Reveal><Eyebrow>Loved by movers</Eyebrow></Reveal>
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
          <Reveal delay={100}>
            <h2 className="h-section text-[44px] md:text-[64px] mt-4">
              Built on <span className="text-gradient-lime">word of mouth.</span>
            </h2>
          </Reveal>
          <Reveal delay={180}>
            <div className="flex items-center gap-3">
              <div className="flex">{[1,2,3,4,5].map(i=><Icon key={i} name="star" size={14} color="#c7ff3d" fill="#c7ff3d"/>)}</div>
              <span className="text-[13.5px] text-fg2"><b className="text-fg">4.9 / 5</b> · 12,400 reviews</span>
            </div>
          </Reveal>
        </div>
        <div className="mt-12 columns-1 md:columns-2 lg:columns-3 gap-5">
          {items.map((t,i)=>(
            <Reveal key={i} delay={i*70} className="mb-5 break-inside-avoid">
              <figure className="glass rounded-3xl p-6 hover:-translate-y-1 transition-all">
                <Icon name="sparkle" size={18} color="var(--accent)"/>
                <blockquote className="mt-4 text-[16px] leading-relaxed text-fg2">"{t.q}"</blockquote>
                <figcaption className="mt-5 flex items-center gap-3">
                  <Avatar name={t.who} size={36}/>
                  <div className="leading-tight">
                    <div className="text-[13.5px] font-display font-semibold">{t.who}</div>
                    <div className="text-[11.5px] text-fg3">{t.role} · {t.city}</div>
                  </div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* ---------------------------- Final CTA ------------------------------ */
function FinalCTA(){
  return (
    <Section id="download" className="relative">
      <Container>
        <div className="relative overflow-hidden rounded-[36px] ring-grad" style={{background:"linear-gradient(160deg, color-mix(in oklab, var(--accent) 12%, var(--bg-elev)) 0%, var(--bg-elev) 60%)"}}>
          {/* mesh */}
          <div className="absolute inset-0 pointer-events-none" style={{
            background:"radial-gradient(50% 60% at 80% 20%, rgba(199,255,61,0.45), transparent 60%), radial-gradient(50% 60% at 20% 80%, rgba(124,58,237,0.3), transparent 60%)",
            filter:"blur(8px)"
          }}/>
          <div className="absolute inset-0 grid-bg pointer-events-none opacity-40"/>
          {/* content */}
          <div className="relative p-10 md:p-16 lg:p-20">
            <div className="grid md:grid-cols-12 gap-10 items-center">
              <div className="md:col-span-7">
                <Reveal><Pill accent className="!text-[11px]">Free forever · no credit card</Pill></Reveal>
                <Reveal delay={100}>
                  <h2 className="h-display text-[48px] md:text-[72px] lg:text-[88px] mt-4 leading-[0.94]">
                    Start moving.<br/>
                    <span className="text-gradient-lime">Stay moving.</span>
                  </h2>
                </Reveal>
                <Reveal delay={180}>
                  <p className="mt-6 text-[17px] text-fg2 max-w-[52ch]">
                    Join 28,400 movers across 38 cities. Bring your crew or find one waiting — Saturday's match is already on the calendar.
                  </p>
                </Reveal>
                <Reveal delay={260}>
                  <div className="mt-8 flex flex-wrap items-center gap-3">
                    <a href="#" className="inline-flex items-center gap-3 rounded-2xl px-5 py-3 transition-all hover:-translate-y-0.5" style={{background:"var(--accent)", color:"#0a0a0b", boxShadow:"0 12px 30px -8px rgba(199,255,61,0.7)"}}>
                      <Icon name="apple" size={22} fill="#0a0a0b" color="#0a0a0b" stroke={0}/>
                      <span className="flex flex-col leading-tight text-left whitespace-nowrap">
                        <span className="text-[9.5px] uppercase tracking-[0.16em] opacity-70">Download on the</span>
                        <span className="font-display font-semibold text-[14px]">App Store</span>
                      </span>
                    </a>
                    <a href="#" className="inline-flex items-center gap-3 rounded-2xl px-5 py-3 transition-all hover:-translate-y-0.5 hairline-strong" style={{background:"var(--bg-card)", color:"var(--fg)"}}>
                      <Icon name="play2" size={20} fill="currentColor" stroke={0}/>
                      <span className="flex flex-col leading-tight text-left whitespace-nowrap">
                        <span className="text-[9.5px] uppercase tracking-[0.16em] opacity-60">Get it on</span>
                        <span className="font-display font-semibold text-[14px]">Google Play</span>
                      </span>
                    </a>
                  </div>
                </Reveal>
                <Reveal delay={320}>
                  <div className="mt-8 flex items-center gap-5">
                    <AvatarStack names={["Maya P","Rico T","Aisyah K","Danny F","Linda S"]} size={32} max={5} overlap={10}/>
                    <div className="text-[13px] text-fg3">+ <b className="text-fg">28,400</b> joined this month</div>
                  </div>
                </Reveal>
              </div>
              <div className="md:col-span-5 relative hidden md:block">
                <Reveal delay={150}>
                  <div className="relative mx-auto" style={{width:"fit-content"}}>
                    <div className="absolute -inset-10 pointer-events-none" style={{background:"radial-gradient(closest-side, rgba(199,255,61,0.55), transparent 70%)", filter:"blur(30px)"}}/>
                    <div className="relative -rotate-2 animate-float-slow">
                      <PhoneFrame width={300}>
                        <HomeScreen/>
                      </PhoneFrame>
                    </div>
                  </div>
                </Reveal>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

function AppStoreBadge({ dark = false }){
  return (
    <span className="inline-flex items-center gap-2 text-[14px]">
      <Icon name="apple" size={18} color={dark?"#0a0a0b":"currentColor"} fill={dark?"#0a0a0b":"currentColor"}/>
      <span className="flex flex-col leading-tight text-left">
        <span className="text-[9.5px] uppercase tracking-[0.16em] opacity-70">Download on the</span>
        <span className="font-display font-semibold text-[13.5px]">App Store</span>
      </span>
    </span>
  );
}
function GooglePlayBadge(){
  return (
    <span className="inline-flex items-center gap-2 text-[14px]">
      <Icon name="play2" size={18} fill="currentColor" stroke={1.6}/>
      <span className="flex flex-col leading-tight text-left">
        <span className="text-[9.5px] uppercase tracking-[0.16em] opacity-70">Get it on</span>
        <span className="font-display font-semibold text-[13.5px]">Google Play</span>
      </span>
    </span>
  );
}

/* ---------------------------- Footer --------------------------------- */
function Footer(){
  const cols = [
    { head:"Product", links:["App","Apparel","Clubs"] },
    { head:"Company", links:["About","Contact",] },
    { head:"Resources", links:[
      { label:"Privacy", href:"privacy.html" },
      { label:"Terms", href:"terms.html" },
      { label:"Cookies", href:"privacy.html#cookies" }
    ] },
  ];
  return (
    <footer className="relative mt-8 border-t border-line">
      <Container className="py-16 md:py-20">
        <div className="grid md:grid-cols-12 gap-10">
          <div className="md:col-span-4">
            <Logo size={32}/>
            <p className="mt-5 text-[15px] text-fg2 max-w-[36ch]">A wellness movement, built in Jakarta. App, apparel, and 412 crews showing up for each other.</p>
            <div className="mt-6 flex items-center gap-3">
              <a className="grid place-items-center rounded-full hairline-strong text-fg2 hover:text-fg transition-colors" style={{width:36,height:36}} aria-label="Instagram"><Icon name="insta" size={15}/></a>
              <a className="grid place-items-center rounded-full hairline-strong text-fg2 hover:text-fg transition-colors" style={{width:36,height:36}} aria-label="TikTok"><Icon name="tiktok" size={15}/></a>
              <a className="grid place-items-center rounded-full hairline-strong text-fg2 hover:text-fg transition-colors" style={{width:36,height:36}} aria-label="X"><Icon name="x" size={15}/></a>
              <a className="grid place-items-center rounded-full hairline-strong text-fg2 hover:text-fg transition-colors" style={{width:36,height:36}} aria-label="Mail"><Icon name="mail" size={15}/></a>
            </div>
            <div className="mt-6 flex items-center gap-3 text-[13px] text-fg3">
              <Icon name="pin" size={14}/> Jakarta 
            </div>
          </div>
          {cols.map(c=>(
            <div key={c.head} className="md:col-span-2">
              <div className="text-[11px] uppercase tracking-[0.18em] text-fg3 mb-4">{c.head}</div>
              <ul className="space-y-2.5">
                {c.links.map(l=>{
                  const label = typeof l === "string" ? l : l.label;
                  const href = typeof l === "string" ? undefined : l.href;
                  return (
                    <li key={label}>
                      <a href={href} className="text-[14px] text-fg2 hover:text-fg transition-colors">{label}</a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
          <div className="md:col-span-2">
            <div className="text-[11px] uppercase tracking-[0.18em] text-fg3 mb-4">Get the app</div>
            <ul className="space-y-2.5">
              <li><a className="text-[14px] text-fg2 hover:text-fg transition-colors flex items-center gap-2"><Icon name="apple" size={14}/> App Store</a></li>
              <li><a className="text-[14px] text-fg2 hover:text-fg transition-colors flex items-center gap-2"><Icon name="play2" size={14}/> Google Play</a></li>
            </ul>
          </div>
        </div>
        <Divider className="mt-12"/>
        <div className="mt-6 flex flex-col md:flex-row items-center justify-between gap-4 text-[12.5px] text-fg3">
          <div>© 2026 Zest Plus, Inc. · Built in Jakarta with ♥</div>
          <div className="flex items-center gap-5">
            <a href="privacy.html" className="hover:text-fg2 transition-colors">Privacy</a>
            <a href="terms.html" className="hover:text-fg2 transition-colors">Terms</a>
            <a href="privacy.html#cookies" className="hover:text-fg2 transition-colors">Cookies</a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Apparel, PullQuote, Testimonials, FinalCTA, Footer });