/* Home page */

function HomePage({ navigate, onQuote, onShowroom }) {
  const { CATEGORIES, SECTORS, PROJECTS, MEDIA, CONTACT } = window.MOBICO_DATA;

  return (
    <div className="page-enter">
      <Hero navigate={navigate} onQuote={onQuote} onShowroom={onShowroom} />
      <HomeTicker />
      <CategoriesSection navigate={navigate} />
      <SectorsSection navigate={navigate} />
      <MobicaTrustBlock />
      <ProjectsStrip navigate={navigate} />
      <ShowroomTeaser onShowroom={onShowroom} />
      <CTABand onQuote={onQuote} onShowroom={onShowroom} />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Hero
function Hero({ navigate, onQuote, onShowroom }) {
  const { MEDIA } = window.MOBICO_DATA;
  return (
    <section style={{paddingTop: 56, paddingBottom: 0}}>
      <div className="wrap">
        <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, alignItems:"end"}}>
          <div style={{gridColumn:"span 7"}}>
            <div className="eyebrow" style={{marginBottom: 28}}>
              <span className="mono num">01 / OFFICE FURNITURE</span>
              <span className="line" style={{maxWidth:120}} />
              <span className="mono num">02 / INTERIOR SYSTEMS</span>
            </div>

            <h1 className="h-display" style={{
              fontSize:"clamp(56px, 8.5vw, 132px)",
              margin:0, letterSpacing:"-0.04em",
            }}>
              Furnishing<br/>
              Dubai's <em>workspaces</em><br/>
              <span style={{display:"inline-flex", alignItems:"baseline", gap:18}}>
                <span>&amp; institutions.</span>
              </span>
            </h1>

            <p style={{
              maxWidth: 540, fontSize:18, lineHeight:1.55,
              color:"var(--ink-2)", marginTop: 36,
            }}>
              Office furniture and interior systems — desks, seating,
              partitions, ceilings and more — specified and supplied
              from our showroom at Dubai Design District.
            </p>

            <div style={{display:"flex", gap:12, marginTop:32, flexWrap:"wrap"}}>
              <button onClick={onQuote} className="btn navy">
                Request a specification <span className="arrow">→</span>
              </button>
              <button onClick={onShowroom} className="btn ghost">
                Book a showroom visit <span className="arrow">→</span>
              </button>
            </div>

            <div style={{
              display:"grid", gridTemplateColumns:"repeat(3, 1fr)",
              gap:24, marginTop: 56, paddingTop: 32, borderTop:"1px solid var(--line)",
              maxWidth: 620,
            }}>
              <div>
                <div className="mono" style={{color:"var(--muted)", marginBottom:6}}>RANGE</div>
                <div style={{fontSize:22, fontWeight:600, letterSpacing:"-0.02em"}}>15 categories</div>
                <div style={{color:"var(--muted)", fontSize:13}}>furniture + interior systems</div>
              </div>
              <div>
                <div className="mono" style={{color:"var(--muted)", marginBottom:6}}>SECTORS</div>
                <div style={{fontSize:22, fontWeight:600, letterSpacing:"-0.02em"}}>5 sectors</div>
                <div style={{color:"var(--muted)", fontSize:13}}>workspace · education · healthcare · banking · hospitality</div>
              </div>
              <div>
                <div className="mono" style={{color:"var(--muted)", marginBottom:6}}>MODEL</div>
                <div style={{fontSize:22, fontWeight:600, letterSpacing:"-0.02em"}}>B2B</div>
                <div style={{color:"var(--muted)", fontSize:13}}>specified and quoted, by project</div>
              </div>
            </div>
          </div>

          {/* Photo collage */}
          <div style={{gridColumn:"span 5", display:"grid", gridTemplateColumns:"1fr 1fr", gap:12}}>
            <div style={{gridColumn:"span 2"}}>
              <Photo src={MEDIA + "mobico-07-meeting-room-modern.webp"}
                     alt="Modern meeting room"
                     ratio="5/3" />
            </div>
            <Photo src={MEDIA + "mobico-15-glass-partition-door.webp"} alt="Glass partition" ratio="3/4" />
            <Photo src={MEDIA + "mobico-11-executive-office-green.webp"} alt="Executive office" ratio="3/4" />
            <div style={{
              gridColumn:"span 2",
              background:"var(--mobico)", color:"#fff",
              padding:"24px 22px",
              display:"flex", justifyContent:"space-between", alignItems:"flex-end", gap:16,
              minHeight:120,
            }}>
              <div>
                <div className="mono" style={{color:"rgba(255,255,255,0.65)", marginBottom:8}}>SHOWROOM · BY APPOINTMENT</div>
                <div style={{fontSize:18, fontWeight:600, letterSpacing:"-0.01em"}}>
                  Building 7, Office A103<br />Dubai Design District
                </div>
              </div>
              <button onClick={onShowroom} style={{
                background:"#fff", color:"var(--mobico)", border:"none",
                width:48, height:48, display:"flex", alignItems:"center", justifyContent:"center",
                fontSize:18, fontWeight:600,
              }} aria-label="Book a visit">→</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Marquee ticker
function HomeTicker() {
  const items = [
    "Reception", "Manager", "Staff desks", "Meeting tables", "Filing",
    "Sofas", "VIP", "Counters", "Public areas", "Typical rooms",
    "Partitions", "Cladding", "Ceilings", "Flooring", "Doors",
  ];
  return (
    <section style={{
      borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)",
      padding:"22px 0", overflow:"hidden", marginTop: 96,
    }}>
      <div style={{display:"flex", gap:48, animation:"ticker 50s linear infinite", whiteSpace:"nowrap", width:"max-content"}}>
        {[...items, ...items, ...items].map((t,i)=>(
          <span key={i} className="mono" style={{color:"var(--ink-2)", fontSize:13, display:"inline-flex", alignItems:"center", gap:48}}>
            <span style={{width:5, height:5, background:"var(--mobico)", borderRadius:"50%", display:"inline-block"}} />
            {t}
          </span>
        ))}
      </div>
      <style>{`@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }`}</style>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Categories — numbered editorial list with peek image
function CategoriesSection({ navigate }) {
  const { CATEGORIES } = window.MOBICO_DATA;
  const [hover, setHover] = useState(null);
  const furniture = CATEGORIES.filter(c=>c.group==="Office furniture");
  const interiors = CATEGORIES.filter(c=>c.group==="Interior systems");

  return (
    <section className="section" id="products">
      <div className="wrap">
        <SectionHeading
          num="01"
          eyebrow="PRODUCT RANGE"
          title="Fifteen categories. <em>One specification partner.</em>"
          intro="Office furniture across ten typologies, plus five interior-system categories — partitions through doors — co-ordinated under one specification."
        />

        <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32}}>
          {/* Furniture column */}
          <div style={{gridColumn:"span 5"}}>
            <div className="mono" style={{color:"var(--muted)", marginBottom:18}}>OFFICE FURNITURE · 10</div>
            <ul style={{listStyle:"none", padding:0, margin:0, borderTop:"1px solid var(--line)"}}>
              {furniture.map((c, i)=>(
                <CategoryRow key={c.id} c={c} i={i+1}
                             onHover={()=>setHover(c)} onLeave={()=>setHover(null)}
                             onClick={()=>navigate({page:"category", id:c.id})} />
              ))}
            </ul>

            <div className="mono" style={{color:"var(--muted)", margin:"40px 0 18px"}}>INTERIOR SYSTEMS · 5</div>
            <ul style={{listStyle:"none", padding:0, margin:0, borderTop:"1px solid var(--line)"}}>
              {interiors.map((c, i)=>(
                <CategoryRow key={c.id} c={c} i={i+11}
                             onHover={()=>setHover(c)} onLeave={()=>setHover(null)}
                             onClick={()=>navigate({page:"category", id:c.id})} />
              ))}
            </ul>
          </div>

          {/* Sticky preview pane */}
          <div style={{gridColumn:"span 7"}}>
            <div style={{position:"sticky", top: 100}}>
              <div style={{position:"relative", aspectRatio:"4/3", background:"var(--paper-2)", overflow:"hidden"}}>
                {CATEGORIES.map(c=>(
                  <img key={c.id} src={c.image} alt={c.alt}
                       style={{
                         position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover",
                         opacity: hover ? (hover.id===c.id ? 1 : 0) : (c.id==="meeting" ? 1 : 0),
                         transition: "opacity 0.3s ease",
                       }} />
                ))}
                <div style={{
                  position:"absolute", left:0, right:0, bottom:0,
                  padding:"18px 22px", background:"linear-gradient(transparent, rgba(0,0,0,0.55))",
                  color:"#fff", display:"flex", justifyContent:"space-between", alignItems:"flex-end",
                }}>
                  <div>
                    <div className="mono" style={{color:"rgba(255,255,255,0.75)"}}>NOW SHOWING</div>
                    <div style={{fontSize:22, fontWeight:600, letterSpacing:"-0.01em", marginTop:4}}
                         dangerouslySetInnerHTML={{__html: (hover ? hover.name : "Meeting Tables")}} />
                  </div>
                  <div className="mono" style={{color:"rgba(255,255,255,0.75)"}}>
                    {hover ? hover.count : "U-shape · Round · Boat · Council"}
                  </div>
                </div>
              </div>

              <div style={{
                marginTop: 18, padding:"16px 18px",
                border:"1px solid var(--line)", background:"var(--surface)",
                display:"flex", justifyContent:"space-between", alignItems:"center", gap:16,
              }}>
                <div>
                  <div style={{fontWeight:600, letterSpacing:"-0.01em"}}>Specification &amp; finishes catalogue</div>
                  <div style={{color:"var(--muted)", fontSize:13}}>Per category — request the latest catalogue from your account manager.</div>
                </div>
                <button onClick={()=>navigate({page:"products"})} className="btn sm">Browse all <span className="arrow">→</span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CategoryRow({ c, i, onHover, onLeave, onClick }) {
  return (
    <li onMouseEnter={onHover} onMouseLeave={onLeave} onClick={onClick}
        style={{
          display:"grid", gridTemplateColumns:"40px 1fr auto",
          alignItems:"center", gap:16,
          padding:"18px 0", borderBottom:"1px solid var(--line)",
          cursor:"pointer", transition:"padding-left 0.18s",
        }}
        onMouseOver={(e)=>e.currentTarget.style.paddingLeft="8px"}
        onMouseOut={(e)=>e.currentTarget.style.paddingLeft="0"}>
      <span className="mono" style={{color:"var(--mobico)"}}>{String(i).padStart(2,"0")}</span>
      <span style={{fontSize:22, fontWeight:500, letterSpacing:"-0.015em"}}
            dangerouslySetInnerHTML={{__html: c.name}} />
      <span className="mono" style={{color:"var(--muted)"}}>→</span>
    </li>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Sectors
function SectorsSection({ navigate }) {
  const { SECTORS } = window.MOBICO_DATA;
  return (
    <section className="section" style={{background:"var(--ink)", color:"#fff", borderTop:"none"}}>
      <div className="wrap">
        <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, marginBottom:64}}>
          <div style={{gridColumn:"span 6"}}>
            <div className="eyebrow">
              <span className="mono num" style={{color:"#9b97ff"}}>02</span>
              <span className="line" style={{background:"#3b4150"}} />
              <span className="mono" style={{color:"#9aa0ac"}}>SECTORS WE SERVE</span>
            </div>
            <h2 className="h-display" style={{color:"#fff", fontSize:"clamp(36px, 4.4vw, 60px)", margin:"20px 0 0"}}>
              Specified for the way each <em style={{color:"#9b97ff", fontStyle:"normal", fontWeight:500}}>sector</em> actually works.
            </h2>
          </div>
          <div style={{gridColumn:"span 5 / span 6", paddingTop:34, color:"#cdd0d6", fontSize:17, maxWidth:520}}>
            Five sector landing paths. Each pairs the relevant products with sector-specific scope —
            from teller counters to lecture seating.
          </div>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap:12}}>
          {SECTORS.map((s, i) => (
            <SectorTile key={s.id} s={s} idx={i} onClick={()=>navigate({page:"sector", id:s.id})} />
          ))}
        </div>
      </div>
    </section>
  );
}

function SectorTile({ s, idx, onClick }) {
  const [hov, setHov] = useState(false);
  return (
    <a onClick={onClick} onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
       style={{
         position:"relative", display:"block", aspectRatio:"3/4",
         background:"#1c2024", overflow:"hidden", cursor:"pointer",
       }}>
      <img src={s.image} alt={s.name} style={{
        width:"100%", height:"100%", objectFit:"cover",
        opacity: hov ? 0.55 : 0.42,
        transform: hov ? "scale(1.06)" : "scale(1.0)",
        transition: "opacity 0.4s, transform 0.6s cubic-bezier(0.2,0.6,0.2,1)",
      }} />
      <div style={{
        position:"absolute", inset:0, padding:24,
        display:"flex", flexDirection:"column", justifyContent:"space-between",
        color:"#fff",
      }}>
        <div className="mono" style={{color:"#9b97ff"}}>{String(idx+1).padStart(2,"0")}</div>
        <div>
          <div style={{fontSize:24, fontWeight:600, letterSpacing:"-0.02em"}}>{s.name}</div>
          <div style={{fontSize:13, color:"rgba(255,255,255,0.75)", marginTop:8,
                       maxHeight: hov ? 80 : 0, overflow:"hidden", transition:"max-height 0.35s ease"}}>
            {s.strap}
          </div>
          <div className="mono" style={{
            marginTop: 12, color:"#fff",
            opacity: hov ? 1 : 0.6, transition:"opacity 0.2s",
          }}>
            View sector →
          </div>
        </div>
      </div>
    </a>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// MOBICA trust block
function MobicaTrustBlock() {
  const { MEDIA } = window.MOBICO_DATA;
  return (
    <section className="section">
      <div className="wrap">
        <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:48, alignItems:"center"}}>
          <div style={{gridColumn:"span 6"}}>
            <div className="eyebrow">
              <span className="mono num">03</span>
              <span className="line" />
              <span className="mono">MANUFACTURING PARTNERSHIP</span>
            </div>
            <h2 className="h-display" style={{fontSize:"clamp(36px, 4.4vw, 60px)", margin:"24px 0 24px"}}>
              The UAE showroom &amp; trade arm of <em>MOBICA.</em>
            </h2>
            <p style={{fontSize:17, color:"var(--ink-2)", maxWidth:540}}>
              MOBICO operates MOBICA's Dubai Design District showroom. MOBICA is the office-furniture manufacturer behind the range — its scale and life-cycle product divisions sit behind everything we specify in the UAE.
            </p>

            <div style={{
              marginTop:40, display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:24,
              paddingTop: 32, borderTop:"1px solid var(--line)",
            }}>
              <Attribution num="280,000" unit="m² total plant"  src="MOBICA group" />
              <Attribution num="17"      unit="factories"      src="MOBICA group" />
              <Attribution num="WORK"    unit="LIVE · LEARN · HEAL · MOVE" src="MOBICA divisions" />
            </div>

            <div style={{
              marginTop:32, padding:"14px 16px", border:"1px solid var(--line)",
              background:"var(--paper-2)", fontSize:13, color:"var(--ink-2)",
              fontFamily:"JetBrains Mono, monospace", letterSpacing:"0.03em",
            }}>
              <span className="mono" style={{color:"var(--mobico)"}}>NOTE ·</span> Manufacturing scale figures are MOBICA's. MOBICO is the UAE showroom and trade entity — separate legal identity, shared product range.
            </div>
          </div>

          <div style={{gridColumn:"span 6"}}>
            <div style={{position:"relative"}}>
              <Photo src={MEDIA + "mobico-32-showroom-exterior.webp"} alt="Showroom exterior" ratio="4/3" />
              <div style={{
                position:"absolute", top:24, right:-24,
                background:"#fff", padding:"22px 26px", boxShadow:"0 18px 40px rgba(15,17,21,0.12)",
                maxWidth: 280, border:"1px solid var(--line)",
              }}>
                <div className="mono" style={{color:"var(--muted)", marginBottom:6}}>VERIFIED LINK</div>
                <div style={{fontSize:14, lineHeight:1.55}}>
                  MOBICA's own contact page lists this same d3 showroom — confirming MOBICO operates the MOBICA Dubai location.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Attribution({ num, unit, src }) {
  return (
    <div>
      <div style={{fontSize: 36, fontWeight: 600, letterSpacing:"-0.03em", color:"var(--ink)"}}>{num}</div>
      <div style={{fontSize:13, color:"var(--ink-2)", marginTop:2}}>{unit}</div>
      <div className="mono" style={{color:"var(--mobico)", marginTop:8}}>SRC · {src}</div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Projects strip
function ProjectsStrip({ navigate }) {
  const { PROJECTS } = window.MOBICO_DATA;
  return (
    <section className="section">
      <div className="wrap">
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-end",
                     marginBottom:48, gap:24, flexWrap:"wrap"}}>
          <div>
            <div className="eyebrow">
              <span className="mono num">04</span>
              <span className="line" />
              <span className="mono">PROJECT REFERENCES</span>
            </div>
            <h2 className="h-display" style={{fontSize:"clamp(36px, 4.4vw, 60px)", margin:"24px 0 0", maxWidth: 700}}>
              Selected installations.
            </h2>
            <p style={{color:"var(--muted)", marginTop:14, maxWidth:520, fontSize:14}}>
              Reference works across council chambers, executive suites, branch interiors and public areas.
              Named clients shown only with permission.
            </p>
          </div>
          <button onClick={()=>navigate({page:"projects"})} className="btn">
            View all projects <span className="arrow">→</span>
          </button>
        </div>

        <div style={{
          display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:16,
        }}>
          {PROJECTS.slice(0,6).map((p, i)=>{
            const span = i===0 ? 8 : i===1 ? 4 : i===2 ? 4 : i===3 ? 8 : 6;
            return (
              <a key={p.id} onClick={()=>navigate({page:"projects"})}
                 style={{
                   gridColumn:`span ${span}`, cursor:"pointer",
                   display:"block", position:"relative",
                 }}>
                <div style={{position:"relative", overflow:"hidden", aspectRatio: i===0 || i===3 ? "16/9" : "4/3"}}>
                  <img src={p.image} alt={p.title} 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.04)"}
                  onMouseLeave={(e)=>e.currentTarget.style.transform="scale(1)"} />
                </div>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginTop:14, gap:12}}>
                  <div>
                    <div style={{fontWeight:600, letterSpacing:"-0.01em", fontSize:17}}
                         dangerouslySetInnerHTML={{__html: p.title}} />
                    <div className="mono" style={{color:"var(--muted)", marginTop:4}}>{p.sector} · {p.year}</div>
                  </div>
                  <div className="mono" style={{color:"var(--muted)"}}>→</div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Showroom teaser
function ShowroomTeaser({ onShowroom }) {
  const { MEDIA, CONTACT } = window.MOBICO_DATA;
  return (
    <section className="section" style={{padding:"96px 0", background:"var(--paper-2)"}}>
      <div className="wrap">
        <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, alignItems:"center"}}>
          <div style={{gridColumn:"span 7"}}>
            <Photo src={MEDIA + "mobico-33-glass-facade.webp"} alt="Glass facade" ratio="3/2" />
          </div>
          <div style={{gridColumn:"span 5"}}>
            <div className="eyebrow">
              <span className="mono num">05</span>
              <span className="line" />
              <span className="mono">SHOWROOM · d3</span>
            </div>
            <h2 className="h-display" style={{fontSize:"clamp(36px, 4.4vw, 56px)", margin:"24px 0 24px"}}>
              See the full range, in person.
            </h2>
            <div style={{fontSize:16, color:"var(--ink-2)", lineHeight:1.6}}>
              {CONTACT.d3.addr}
            </div>
            <div style={{
              marginTop:24, display:"grid", gridTemplateColumns:"1fr 1fr", gap:16,
              paddingTop:24, borderTop:"1px solid var(--line)",
            }}>
              <div>
                <div className="mono" style={{color:"var(--muted)"}}>PHONE</div>
                <div style={{fontSize:17, fontWeight:500, marginTop:4}}>{CONTACT.d3.phone}</div>
              </div>
              <div>
                <div className="mono" style={{color:"var(--muted)"}}>HOURS</div>
                <div style={{fontSize:17, fontWeight:500, marginTop:4}}>{CONTACT.d3.hours.split(" · ")[0]}</div>
                <div style={{fontSize:13, color:"var(--muted)"}}>By appointment</div>
              </div>
            </div>
            <button onClick={onShowroom} className="btn navy" style={{marginTop:32}}>
              Book a showroom visit <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;
