/* Sectors index + Sector detail */

function SectorsPage({ navigate, onQuote }) {
  const { SECTORS, MEDIA } = window.MOBICO_DATA;
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="02 / SECTORS"
        title="Specified for how each <em>sector works.</em>"
        intro="Five landing paths mapped to how procurement and design teams actually search — each pairs the relevant product range with sector-specific scope."
        breadcrumb="MOBICO · Sectors"
      />

      <section style={{padding:"80px 0"}}>
        <div className="wrap">
          <div style={{display:"grid", gap:24}}>
            {SECTORS.map((s, i)=>(
              <SectorRow key={s.id} s={s} idx={i} onClick={()=>navigate({page:"sector", id:s.id})} />
            ))}
          </div>
        </div>
      </section>

      <CTABand onQuote={onQuote} onShowroom={()=>navigate({page:"showroom"})} />
    </div>
  );
}

function SectorRow({ s, idx, onClick }) {
  return (
    <a onClick={onClick} style={{
      cursor:"pointer", display:"grid",
      gridTemplateColumns:"80px 1fr 360px",
      gap:32, alignItems:"center",
      padding:"32px 0", borderTop:"1px solid var(--line)",
      ...(idx === 4 ? {borderBottom:"1px solid var(--line)"} : {}),
    }}>
      <span className="mono" style={{color:"var(--mobico)", fontSize:13}}>{String(idx+1).padStart(2,"0")} / 05</span>
      <div>
        <div style={{fontSize: 48, fontWeight:600, letterSpacing:"-0.03em", lineHeight:1}}>{s.name}</div>
        <div style={{color:"var(--muted)", marginTop:10, fontSize:15, maxWidth:520}}>{s.strap}</div>
      </div>
      <div style={{position:"relative", overflow:"hidden", aspectRatio:"16/9"}}>
        <img src={s.image} alt={s.name} loading="lazy"
             style={{width:"100%", height:"100%", objectFit:"cover",
                     transition:"transform 0.6s cubic-bezier(0.2,0.6,0.2,1)"}}
             onMouseEnter={(e)=>e.currentTarget.style.transform="scale(1.05)"}
             onMouseLeave={(e)=>e.currentTarget.style.transform="scale(1)"} />
      </div>
    </a>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Sector detail
function SectorPage({ id, navigate, onQuote }) {
  const { SECTORS, CATEGORIES, PROJECTS, MEDIA } = window.MOBICO_DATA;
  const s = SECTORS.find(x=>x.id===id);
  if(!s) return <div className="wrap" style={{padding:"120px 0"}}>Sector not found.</div>;
  const products = s.products.map(pid => CATEGORIES.find(c=>c.id===pid)).filter(Boolean);
  const matchingProjects = PROJECTS.filter(p =>
    (s.id==="banking" && p.sector==="Banking") ||
    (s.id==="education" && p.sector==="Cinema & Theatre") ||
    (s.id==="hospitality" && p.sector==="Hospitality") ||
    (s.id==="workspace" && (p.sector==="Workspace" || p.sector==="Corporate")) ||
    (s.id==="healthcare" && false)
  ).slice(0, 3);

  const sIdx = SECTORS.findIndex(x=>x.id===id);
  const nextSector = SECTORS[(sIdx + 1) % SECTORS.length];

  return (
    <div className="page-enter">
      <section style={{padding:"60px 0 0"}}>
        <div className="wrap">
          <div className="mono" style={{color:"var(--muted)", marginBottom:24}}>
            <a onClick={()=>navigate({page:"home"})} style={{cursor:"pointer"}}>MOBICO</a>
            <span> · </span>
            <a onClick={()=>navigate({page:"sectors"})} style={{cursor:"pointer"}}>SECTORS</a>
            <span> · </span>
            <span>{s.name.toUpperCase()}</span>
          </div>

          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, alignItems:"end"}}>
            <div style={{gridColumn:"span 7"}}>
              <div className="eyebrow">
                <span className="mono num">{String(sIdx+1).padStart(2,"0")} / 05</span>
                <span className="line" />
                <span className="mono">SECTOR</span>
              </div>
              <h1 className="h-display" style={{fontSize:"clamp(48px, 7vw, 112px)", margin:"24px 0 0"}}>
                {s.name}.
              </h1>
            </div>
            <div style={{gridColumn:"span 5"}}>
              <p style={{fontSize:17, color:"var(--ink-2)", lineHeight:1.55, marginBottom:8}}>{s.strap}</p>
            </div>
          </div>
        </div>
      </section>

      <section style={{padding:"48px 0 0"}}>
        <div className="wrap">
          <Photo src={s.image} alt={s.name} ratio="21/9" />
        </div>
      </section>

      {/* Product fit */}
      <section style={{padding:"96px 0 64px"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, marginBottom:48}}>
            <div style={{gridColumn:"span 5"}}>
              <div className="eyebrow">
                <span className="mono num">01</span>
                <span className="line" />
                <span className="mono">PRODUCT FIT</span>
              </div>
              <h2 className="h-display" style={{fontSize:"clamp(32px, 4vw, 48px)", margin:"20px 0 0"}}>
                What we specify for {s.name.toLowerCase()}.
              </h2>
            </div>
            <div style={{gridColumn:"span 5 / span 6", paddingTop:24, color:"var(--ink-2)", fontSize:16, maxWidth:480}}>
              These are the categories that come up most often on {s.name.toLowerCase()} projects.
              The full range is available — talk to us about anything not listed.
            </div>
          </div>

          <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:24}}>
            {products.map((c, i)=>(
              <a key={c.id} onClick={()=>navigate({page:"category", id:c.id})}
                 style={{cursor:"pointer", display:"block"}}>
                <div style={{position:"relative", overflow:"hidden", aspectRatio:"3/4"}}>
                  <img src={c.image} alt={c.alt} loading="lazy"
                       style={{width:"100%", height:"100%", objectFit:"cover",
                               transition:"transform 0.6s cubic-bezier(0.2,0.6,0.2,1)"}}
                       onMouseEnter={(e)=>e.currentTarget.style.transform="scale(1.05)"}
                       onMouseLeave={(e)=>e.currentTarget.style.transform="scale(1)"} />
                </div>
                <div className="mono" style={{color:"var(--muted)", marginTop:14}}>{String(i+1).padStart(2,"0")} · {c.group.toUpperCase()}</div>
                <div style={{fontSize:18, fontWeight:600, letterSpacing:"-0.01em", marginTop:6}}
                     dangerouslySetInnerHTML={{__html: c.name}} />
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* References (if any) */}
      {matchingProjects.length > 0 && (
        <section style={{padding:"48px 0 96px", borderTop:"1px solid var(--line)"}}>
          <div className="wrap">
            <div className="eyebrow" style={{marginTop:48}}>
              <span className="mono num">02</span>
              <span className="line" />
              <span className="mono">REFERENCES IN {s.name.toUpperCase()}</span>
            </div>
            <h2 className="h-display" style={{fontSize:"clamp(28px, 3.4vw, 40px)", margin:"20px 0 32px"}}>
              Recent {s.name.toLowerCase()} installations.
            </h2>
            <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:24}}>
              {matchingProjects.map(p=>(
                <a key={p.id} onClick={()=>navigate({page:"projects"})} style={{cursor:"pointer"}}>
                  <Photo src={p.image} alt={p.title} ratio="4/3" hover />
                  <div style={{marginTop:14}}>
                    <div className="mono" style={{color:"var(--muted)"}}>{p.sector.toUpperCase()}</div>
                    <div style={{fontSize:17, fontWeight:600, letterSpacing:"-0.01em", marginTop:4}}
                         dangerouslySetInnerHTML={{__html: p.title}} />
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Enquiry */}
      <section style={{padding:"96px 0", background:"var(--mobico)", color:"#fff"}}>
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, alignItems:"center"}}>
          <div style={{gridColumn:"span 8"}}>
            <div className="mono" style={{color:"rgba(255,255,255,0.7)"}}>SECTOR-SPECIFIC ENQUIRY</div>
            <h2 className="h-display" style={{color:"#fff", fontSize:"clamp(32px, 4vw, 48px)", margin:"16px 0 0"}}>
              Tell us about your {s.name.toLowerCase()} project.
            </h2>
            <p style={{color:"rgba(255,255,255,0.8)", maxWidth:560, marginTop:16, fontSize:16}}>
              Floorplan, budget, finishes — anything you can share. We'll respond with a specification within one business day.
            </p>
          </div>
          <div style={{gridColumn:"span 4", textAlign:"right"}}>
            <button onClick={onQuote} className="btn" style={{background:"#fff", color:"var(--mobico)", borderColor:"#fff"}}>
              Start an enquiry <span className="arrow">→</span>
            </button>
            <div className="mono" style={{color:"rgba(255,255,255,0.6)", marginTop:14}}>
              Or call +971 4 390 8144
            </div>
          </div>
        </div>
      </section>

      {/* Next sector */}
      <section style={{padding:"56px 0"}}>
        <div className="wrap" style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap:16, flexWrap:"wrap"}}>
          <a onClick={()=>navigate({page:"sectors"})} className="btn ghost">All sectors</a>
          <a onClick={()=>navigate({page:"sector", id: nextSector.id})}
             style={{cursor:"pointer", display:"flex", alignItems:"center", gap:18}}>
            <span style={{textAlign:"right"}}>
              <div className="mono" style={{color:"var(--muted)"}}>NEXT SECTOR</div>
              <div style={{fontSize:24, fontWeight:600, letterSpacing:"-0.02em"}}>{nextSector.name}</div>
            </span>
            <span style={{
              width:56, height:56, borderRadius:"50%",
              background:"var(--mobico)", color:"#fff",
              display:"inline-flex", alignItems:"center", justifyContent:"center",
            }}>→</span>
          </a>
        </div>
      </section>
    </div>
  );
}

window.SectorsPage = SectorsPage;
window.SectorPage = SectorPage;