/* About page */

function AboutPage({ navigate, onQuote }) {
  const { MEDIA } = window.MOBICO_DATA;
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="05 / ABOUT"
        title="The UAE showroom &amp; <em>trade arm of MOBICA.</em>"
        intro="MOBICO Trading & Marketing Co. LLC operates MOBICA's Dubai Design District showroom — the UAE entity through which architects, designers and procurement teams specify and supply the MOBICA range."
        breadcrumb="MOBICO · About"
      />

      {/* Two-entity diagram */}
      <section style={{padding:"96px 0", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap">
          <div className="mono" style={{color:"var(--mobico)", marginBottom:32}}>RELATIONSHIP · MOBICO ↔ MOBICA</div>

          <div style={{
            display:"grid", gridTemplateColumns:"1fr 80px 1fr", gap:24, alignItems:"stretch",
            border:"1px solid var(--line)", background:"var(--surface)",
          }}>
            {/* MOBICO */}
            <div style={{padding:"32px 32px"}}>
              <div className="mono" style={{color:"var(--muted)"}}>UAE ENTITY</div>
              <MobicoLogo size={48} />
              <h3 style={{fontSize:28, fontWeight:600, letterSpacing:"-0.02em", margin:"18px 0 12px"}}>
                MOBICO Trading &amp; Marketing Co. LLC
              </h3>
              <ul style={{listStyle:"none", padding:0, margin:0, display:"grid", gap:10, fontSize:14, color:"var(--ink-2)"}}>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:8}}>ROLE</span> UAE showroom &amp; trade arm</li>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:8}}>SHOWROOM</span> Dubai Design District (d3)</li>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:8}}>OFFICE</span> Karama, Dubai</li>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:8}}>SCOPE</span> Specification · supply · install</li>
              </ul>
            </div>

            <div style={{display:"flex", alignItems:"center", justifyContent:"center", borderLeft:"1px solid var(--line)", borderRight:"1px solid var(--line)", background:"var(--paper-2)"}}>
              <div style={{textAlign:"center"}}>
                <div className="mono" style={{color:"var(--mobico)", marginBottom:8}}>OPERATES</div>
                <div style={{fontSize:32}}>↔</div>
              </div>
            </div>

            {/* MOBICA */}
            <div style={{padding:"32px 32px"}}>
              <div className="mono" style={{color:"var(--muted)"}}>MANUFACTURER</div>
              <div style={{height:48, display:"flex", alignItems:"center"}}>
                <img src={MEDIA + "mobica-brand-logo.webp"} alt="MOBICA" style={{height:34, width:"auto"}} />
              </div>
              <h3 style={{fontSize:28, fontWeight:600, letterSpacing:"-0.02em", margin:"18px 0 12px"}}>
                MOBICA
              </h3>
              <ul style={{listStyle:"none", padding:0, margin:0, display:"grid", gap:10, fontSize:14, color:"var(--ink-2)"}}>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:8}}>ROLE</span> Office-furniture manufacturer</li>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:8}}>FOUNDED</span> 1979 · Egypt-rooted</li>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:8}}>PRESENT</span> Germany · Egypt · Qatar · UAE</li>
                <li><span className="mono" style={{color:"var(--muted)", marginRight:8}}>SCOPE</span> Manufacturing &amp; distribution</li>
              </ul>
            </div>
          </div>

          <div style={{
            marginTop: 24, padding:"14px 16px", background:"var(--paper-2)",
            border:"1px solid var(--line)", fontSize:13, color:"var(--ink-2)",
            fontFamily:"JetBrains Mono, monospace", letterSpacing:"0.03em",
          }}>
            <span className="mono" style={{color:"var(--mobico)"}}>VERIFIED ·</span> MOBICA's contact page lists the identical Building 7, Unit A-103, d3 address as MOBICO's showroom — confirming the operating link. Legal identities remain separate.
          </div>
        </div>
      </section>

      {/* MOBICA story (attributed) */}
      <section style={{padding:"96px 0", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32}}>
            <div style={{gridColumn:"span 5"}}>
              <div className="eyebrow">
                <span className="mono num">01</span>
                <span className="line" />
                <span className="mono">SCALE · ATTRIBUTED TO MOBICA</span>
              </div>
              <h2 className="h-display" style={{fontSize:"clamp(36px, 4.4vw, 56px)", margin:"24px 0 24px"}}>
                The range behind the <em>showroom.</em>
              </h2>
              <p style={{color:"var(--ink-2)", fontSize:17, lineHeight:1.55, maxWidth:480}}>
                MOBICA's manufacturing footprint sits behind everything we specify in the UAE. These are MOBICA group figures — not MOBICO claims.
              </p>
            </div>
            <div style={{gridColumn:"span 7"}}>
              <div style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap:24}}>
                <Stat n="280,000" u="m² total plant footprint" />
                <Stat n="17" u="factories" />
                <Stat n="1979" u="founded · Egypt" />
                <Stat n="WORK" u="LIVE · LEARN · HEAL · MOVE" small />
              </div>
              <div className="mono" style={{color:"var(--muted)", marginTop:24, fontSize:11}}>
                SRC · MOBICA group communications. MOBICO does not claim manufacturing scale.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What we do */}
      <section style={{padding:"96px 0"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, marginBottom:48}}>
            <div style={{gridColumn:"span 6"}}>
              <div className="eyebrow">
                <span className="mono num">02</span>
                <span className="line" />
                <span className="mono">WHAT MOBICO DOES</span>
              </div>
              <h2 className="h-display" style={{fontSize:"clamp(36px, 4.4vw, 56px)", margin:"24px 0 0"}}>
                A specification partner, not a catalogue.
              </h2>
            </div>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:32}}>
            <Capability num="01" title="Specification"
              body="Working from your floorplan, brief and finish schedule — we put together a costed specification across furniture and interior systems." />
            <Capability num="02" title="Supply"
              body="Procurement, lead-time management, logistics into site — for single-room jobs through to whole-floor fit-outs." />
            <Capability num="03" title="Install"
              body="Site survey, install, snagging — coordinated with your main contractor or design team." />
          </div>
        </div>
      </section>

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

function Stat({ n, u, small }) {
  return (
    <div style={{padding:"28px 24px", border:"1px solid var(--line)", background:"var(--surface)"}}>
      <div style={{fontSize: small ? 28 : 56, fontWeight:600, letterSpacing:"-0.03em", lineHeight:1}}>{n}</div>
      <div style={{color:"var(--ink-2)", marginTop:8, fontSize:14}}>{u}</div>
    </div>
  );
}

function Capability({ num, title, body }) {
  return (
    <div style={{borderTop:"1px solid var(--ink)", paddingTop:18}}>
      <div className="mono" style={{color:"var(--mobico)"}}>{num}</div>
      <div style={{fontSize:24, fontWeight:600, letterSpacing:"-0.02em", margin:"12px 0 10px"}}>{title}</div>
      <div style={{color:"var(--ink-2)", fontSize:15, lineHeight:1.55}}>{body}</div>
    </div>
  );
}

window.AboutPage = AboutPage;