/* Franchise Kosovo — Home page */
function Home({ navigate, openFranchise }) {
  const featured = window.FK_FRANCHISES.slice(0, 3);
  return (
    <main>
      {/* ---------------- HERO ---------------- */}
      <section className="hero on-dark">
        <div className="hero-glow"></div>
        <ArchMotif className="hero-arch" />
        <div className="container hero-grid">
          <div>
            <Reveal><Eyebrow>Market entry · Brokerage · Consulting</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h1>The gold standard of <em>franchising</em> in Kosovo.</h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="hero-lead">We connect proven global brands with Kosovo’s fastest-growing market — and guide you end-to-end, from first inquiry to grand opening.</p>
            </Reveal>
            <Reveal delay={240}>
              <div className="hero-cta">
                <Button variant="gold" size="lg" icon="arrow-right" onClick={() => navigate({ view: 'directory' })}>Explore opportunities</Button>
                <Button variant="ghost" size="lg" onClick={() => navigate({ view: 'contact' })}>Book a consultation</Button>
              </div>
            </Reveal>
            <Reveal delay={320}>
              <div className="hero-stats">
                <div><div className="num"><CountUp value={40} suffix="+" /></div><div className="lab">Vetted brands</div></div>
                <div><div className="num">€5k–500k</div><div className="lab">Investment range</div></div>
                <div><div className="num">1</div><div className="lab">Expert partner</div></div>
              </div>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <div className="hero-card">
              <div className="hero-card-media" style={{ background:'linear-gradient(150deg,#1C4274,#0A1A33)' }}>
                <span className="chip">Featured · Food &amp; Beverage</span>
                <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', opacity:.5 }}>
                  <ArchMotif color="#C8A24B" className="" />
                </div>
              </div>
              <div className="hero-card-body">
                <h4>Northbrew Coffee Co.</h4>
                <p>Specialty coffee · €45,000 to launch · 1,200+ units worldwide</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ---------------- LOGO MARQUEE ---------------- */}
      <div className="marquee">
        <div className="container"><div className="marquee-label">Trusted to bring brands like these to the region</div></div>
        <div className="marquee-track">
          {['Northbrew','FitLab','Pronto','BrightKids','Lumen','ParcelPoint','GreenFork','AutoCare','Northbrew','FitLab','Pronto','BrightKids','Lumen','ParcelPoint','GreenFork','AutoCare'].map((b,i)=>(
            <span key={i}>{b}</span>
          ))}
        </div>
      </div>

      {/* ---------------- SERVICES ---------------- */}
      <section className="section">
        <div className="container">
          <Reveal><div className="section-head">
            <Eyebrow>What we do</Eyebrow>
            <h2>One partner for every side of franchising.</h2>
            <p>Whether you’re an investor, an international brand, or a local business ready to scale — we handle the hard parts on the ground in Kosovo.</p>
          </div></Reveal>
          <div className="svc-grid">
            {window.FK_SERVICES.map((s, i) => (
              <Reveal key={s.title} delay={i * 90}>
                <div className="svc-card">
                  <span className="num-badge">{s.n}</span>
                  <div className="svc-ico"><Icon name={s.icon} /></div>
                  <h3>{s.title}</h3>
                  <p>{s.body}</p>
                  <button className="btn-text" onClick={() => navigate({ view: i === 0 ? 'franchisors' : 'directory' })}>
                    <span>{s.cta}</span><Icon name="arrow-up-right" />
                  </button>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- FEATURED OPPORTUNITIES ---------------- */}
      <section className="section alt">
        <div className="container">
          <Reveal><div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:20 }}>
            <div className="section-head" style={{ marginBottom:0 }}>
              <Eyebrow>Featured opportunities</Eyebrow>
              <h2>Vetted brands, ready for Kosovo.</h2>
            </div>
            <Button variant="ghost" icon="arrow-right" onClick={() => navigate({ view: 'directory' })}>Browse all 40+</Button>
          </div></Reveal>
          <div className="fr-grid" style={{ marginTop: 48 }}>
            {featured.map((f, i) => (
              <Reveal key={f.id} delay={i * 90}><FranchiseCard f={f} onOpen={openFranchise} /></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- STATS BAND ---------------- */}
      <section className="section navy on-dark">
        <div className="container">
          <Reveal><div className="section-head center" style={{ marginBottom: 56 }}>
            <Eyebrow center>By the numbers</Eyebrow>
            <h2>A decade building Kosovo’s franchise market.</h2>
          </div></Reveal>
          <div className="stats-band">
            {window.FK_STATS.map((s, i) => (
              <Reveal key={s.lab} delay={i * 80}>
                <div className="stat">
                  <div className="num"><CountUp value={s.num} prefix={s.prefix || ''} suffix={s.suffix || ''} /></div>
                  <div className="lab">{s.lab}</div>
                  <div className="sub">{s.sub}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- PROCESS ---------------- */}
      <section className="section">
        <div className="container">
          <Reveal><div className="section-head">
            <Eyebrow>How it works</Eyebrow>
            <h2>From first call to grand opening.</h2>
            <p>A clear, guided path — with us beside you at every step.</p>
          </div></Reveal>
          <div className="proc-grid">
            {window.FK_PROCESS.map((p, i) => (
              <Reveal key={p.n} delay={i * 90}>
                <div className="proc-step">
                  <div className="proc-num">{p.n}</div>
                  <h4>{p.title}</h4>
                  <p>{p.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- TESTIMONIAL ---------------- */}
      <section className="section navy on-dark" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <Reveal><div className="quote">
            <blockquote style={{ fontSize:'clamp(1.3rem,2.2vw,1.7rem)', lineHeight:1.4 }}>“They didn’t just find us a brand — they negotiated the territory, structured the financing, and stood beside us on opening day. One partner, start to finish.”</blockquote>
            <div className="by" style={{ marginTop: 22 }}>
              <div className="av"></div>
              <div>
                <div className="nm">Arben Krasniqi</div>
                <div className="rl">Multi-unit franchisee, Pristina</div>
              </div>
            </div>
          </div></Reveal>
        </div>
      </section>

      {/* ---------------- CTA BAND ---------------- */}
      <section className="section" style={{ paddingTop: 0, paddingBottom: 56 }}>
        <div className="container">
          <Reveal><div className="cta-band cta-band-slim">
            <ArchMotif color="rgba(10,26,51,.16)" style={{ position:'absolute', right:-20, bottom:-60, width:200 }} />
            <div className="cta-slim-text">
              <h2>Let’s find the right opportunity for you.</h2>
              <p>Free 30-minute call — no obligation.</p>
            </div>
            <div className="row">
              <Button variant="primary" icon="arrow-right" onClick={() => navigate({ view: 'contact' })}>Book a consultation</Button>
              <Button variant="white" onClick={() => navigate({ view: 'directory' })}>Browse opportunities</Button>
            </div>
          </div></Reveal>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { Home });