/* Franchise Kosovo — Franchisors ("For Brands") + About pages */

function Franchisors({ navigate }) {
  const steps = [
    { i:'search', t:'Market assessment', b:'We size demand, map competition, and model unit economics for your concept in Kosovo.' },
    { i:'file-check', t:'Structure & compliance', b:'Master franchise or area development — we structure terms and handle local registration.' },
    { i:'users', t:'Franchisee matching', b:'We source and vet qualified, capitalized operators from our network.' },
    { i:'rocket', t:'Launch & support', b:'Site selection, fit-out, training, and a coordinated market entry.' },
  ];
  return (
    <main>
      <section className="page-head on-dark">
        <div className="container" style={{ maxWidth: 760 }}>
          <Eyebrow>For international brands</Eyebrow>
          <h1>Enter Kosovo with a partner who’s already on the ground.</h1>
          <p>We’re your master franchise partner for the Kosovo market — from feasibility to first store, with vetted operators and local expertise that de-risk your expansion.</p>
          <div style={{ display:'flex', gap:14, marginTop:30, flexWrap:'wrap' }}>
            <Button variant="gold" size="lg" icon="arrow-right" onClick={() => navigate({ view: 'contact' })}>Discuss your expansion</Button>
            <Button variant="ghost" size="lg" onClick={() => navigate({ view: 'directory' })}>See brands we represent</Button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Reveal><div className="section-head">
            <Eyebrow>How we work with franchisors</Eyebrow>
            <h2>A de-risked path into a new market.</h2>
          </div></Reveal>
          <div className="svc-grid" style={{ gridTemplateColumns:'repeat(2,1fr)' }}>
            {steps.map((s, i) => (
              <Reveal key={s.t} delay={i*80}>
                <div className="svc-card">
                  <div className="svc-ico"><Icon name={s.i} /></div>
                  <h3>{s.t}</h3>
                  <p style={{ marginBottom:0 }}>{s.b}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section navy on-dark" style={{ paddingTop: 0, background:'transparent' }}>
        <div className="container">
          <Reveal><div className="cta-band">
            <h2>Ready to explore Kosovo for your brand?</h2>
            <p>Send us your brand deck. We’ll respond with a market read and a proposed entry structure.</p>
            <div className="row"><Button variant="primary" size="lg" icon="arrow-right" onClick={() => navigate({ view: 'contact' })}>Start the conversation</Button></div>
          </div></Reveal>
        </div>
      </section>
    </main>
  );
}

function About({ navigate }) {
  const values = [
    { i:'badge-check', t:'Vetted, always', b:'We only represent brands we’d invest in ourselves. Every opportunity is screened on unit economics and fit.' },
    { i:'handshake', t:'One partner, end-to-end', b:'From first call to grand opening, you work with one team that owns the outcome.' },
    { i:'map', t:'On the ground in Kosovo', b:'Local knowledge of regulation, real estate, and demand — not advice from afar.' },
  ];
  return (
    <main>
      <section className="page-head on-dark">
        <div className="container" style={{ maxWidth: 760 }}>
          <Eyebrow>Who we are</Eyebrow>
          <h1>Building Kosovo’s franchise market, one partnership at a time.</h1>
          <p>Since Kosovo opened its first international food franchise in 2016, demand for proven brands has only grown. We exist to connect that demand with the right opportunities — responsibly, and end-to-end.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="stats-band" style={{ gridTemplateColumns:'repeat(3,1fr)', gap:24 }}>
            {values.map((v, i) => (
              <Reveal key={v.t} delay={i*80}>
                <div className="svc-card" style={{ background:'#fff' }}>
                  <div className="svc-ico"><Icon name={v.i} /></div>
                  <h3>{v.t}</h3>
                  <p style={{ marginBottom:0 }}>{v.b}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section navy on-dark">
        <div className="container">
          <div className="section-head center" style={{ marginBottom: 48 }}>
            <Eyebrow center>The founders</Eyebrow>
            <h2>Operators, not just advisors.</h2>
          </div>
          <div className="stats-band" style={{ gridTemplateColumns:'repeat(3,1fr)', maxWidth:760, margin:'0 auto' }}>
            {[['Skender Rama','Co-Founder'],['Burim Maloku','Co-Founder'],['Besnik Gashi','Co-Founder']].map(([n,r], i) => (
              <Reveal key={n} delay={i*70}>
                <div style={{ textAlign:'center' }}>
                  <div style={{ width:88, height:88, borderRadius:'50%', margin:'0 auto 16px', background:'linear-gradient(140deg,var(--navy-500),var(--navy-800))', border:'2px solid var(--gold-500)' }}></div>
                  <div style={{ fontWeight:700, color:'#fff' }}>{n}</div>
                  <div style={{ fontSize:13, color:'var(--on-navy-3)', marginTop:4 }}>{r}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Franchisors, About });