/* Franchise Kosovo — Franchise detail page */
function Detail({ f, navigate, openFranchise, onInquire }) {
  if (!f) return null;
  const similar = window.FK_FRANCHISES.filter(x => x.industry === f.industry && x.id !== f.id).slice(0, 4);
  const facts = [
    { i:'coins', k:'Total investment', v:f.total },
    { i:'percent', k:'Royalty', v:f.royalty },
    { i:'map-pin', k:'Available territory', v:f.territory },
    { i:'store', k:'Network size', v:f.units },
    { i:'calendar-clock', k:'Est. payback', v:f.payback },
  ];
  return (
    <main>
      <section className="detail-hero on-dark">
        <div className="container">
          <div className="breadcrumb">
            <span className="c" onClick={() => navigate({ view: 'home' })}>Home</span>
            <Icon name="chevron-right" />
            <span className="c" onClick={() => navigate({ view: 'directory' })}>Opportunities</span>
            <Icon name="chevron-right" />
            <span style={{ color:'var(--on-navy-1)' }}>{f.name}</span>
          </div>
          <div className="detail-top">
            <div>
              <div className="detail-logo"><Icon name={f.icon} /></div>
              <h1>{f.name}</h1>
              <div className="detail-tags">
                <span className="tag">{f.industry}</span>
                {f.vetted && <span className="tag tag-gold"><Icon name="badge-check" />Vetted</span>}
                {f.demand && <span className="tag" style={{ background:'rgba(255,255,255,.1)', color:'#fff' }}><Icon name="trending-up" />High demand</span>}
              </div>
              <p className="hero-lead" style={{ marginTop: 22 }}>{f.desc}</p>
            </div>
            <div className="invest-card">
              <div className="invest-row"><span className="k">Investment from</span><span className="v big">{f.from}</span></div>
              <div className="invest-row"><span className="k">Total range</span><span className="v">{f.total}</span></div>
              <div className="invest-row"><span className="k">Royalty</span><span className="v">{f.royalty}</span></div>
              <div className="invest-row"><span className="k">Est. payback</span><span className="v">{f.payback}</span></div>
              <Button variant="gold" size="lg" icon="arrow-right" className="" onClick={onInquire}>Request information</Button>
              <div style={{ textAlign:'center', marginTop:12, fontSize:13, color:'var(--on-navy-3)' }}>No obligation · Free consultation</div>
            </div>
          </div>
        </div>
      </section>

      <div className="container detail-body">
        <div>
          <h3>Overview</h3>
          <p>{f.overview}</p>
          <p>Our team handles localization, regulatory navigation, and site selection so you can focus on running a great business. We’ll walk you through the full disclosure documents and connect you with financing partners active in Kosovo.</p>
          <h3 style={{ marginTop: 40 }}>Why it fits Kosovo</h3>
          <p>Strong demand among a young, urban population, favourable unit economics, and a model that scales with limited frontage. We’ve mapped available territories and can secure first-mover positioning in key cities.</p>
        </div>
        <div>
          <div className="facts">
            <div style={{ fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:6 }}>Key facts</div>
            {facts.map((x) => (
              <div className="fact" key={x.k}>
                <Icon name={x.i} />
                <div>
                  <div className="k">{x.k}</div>
                  <div className="v">{x.v}</div>
                </div>
              </div>
            ))}
            <Button variant="primary" icon="arrow-right" className="" onClick={onInquire}>Request information</Button>
          </div>
        </div>
      </div>

      {similar.length > 0 && (
        <section className="section alt" style={{ paddingTop: 56 }}>
          <div className="container">
            <div className="section-head" style={{ marginBottom: 36 }}>
              <Eyebrow>Similar opportunities</Eyebrow>
              <h2 style={{ fontSize:'var(--text-h3)' }}>More in {f.industry}</h2>
            </div>
            <div className="fr-grid cols4">
              {similar.map((s) => <FranchiseCard key={s.id} f={s} onOpen={openFranchise} />)}
            </div>
          </div>
        </section>
      )}
    </main>
  );
}
Object.assign(window, { Detail });