// Zen Interiors — About, Awards, Services, Contact pages

// ABOUT ---------------------------------------------------------------------
function AboutPage({ navigate, openEnquiry }) {
  return (
    <main className="fade-in" data-screen-label="Studio / About">

      <section className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="eyebrow">The studio</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 144px)', margin: '20px 0 32px', lineHeight: 0.96, fontWeight: 300, letterSpacing: '-0.01em', maxWidth: '12ch' }}>
          A quiet practice, since <span className="display-italic" style={{ color: 'var(--clay)' }}>2003.</span>
        </h1>
      </section>

      {/* Founders */}
      <section className="container" style={{ paddingBottom: 100 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'start' }}>
          <div className="img-frame" style={{ aspectRatio: '4/5', background: 'var(--linen)' }}>
            {/* placeholder portrait — founders not yet provided */}
            <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--stone)', flexDirection: 'column', gap: 8 }}>
              <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
                <circle cx="28" cy="22" r="9" stroke="currentColor" strokeWidth="1"/>
                <path d="M10 50c2-9 9-14 18-14s16 5 18 14" stroke="currentColor" strokeWidth="1"/>
              </svg>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em' }}>FOUNDERS PORTRAIT — TO BE SUPPLIED</div>
            </div>
          </div>
          <div>
            <div className="eyebrow">Founders</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', margin: '14px 0 24px', lineHeight: 1.05, fontWeight: 300 }}>
              Merete &amp; Patrick <span className="display-italic" style={{ color: 'var(--clay)' }}>van IJzendoorn.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink)', maxWidth: 520, margin: 0 }}>
              Merete and Patrick founded Zen Interiors in Dubai in 2003. Merete Broen — the studio's design voice and General Manager — leads brief, concept and material; Patrick leads delivery and turnkey operations.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--stone)', maxWidth: 520, marginTop: 20 }}>
              The studio is feng-shui aware: we draw plans that breathe, that flow, that settle. We design slowly, in close conversation. We don't repeat ourselves.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 14 }}>
              <a href="#/contact" onClick={(e) => { e.preventDefault(); navigate('/contact'); }} className="btn-link">Visit the showroom <ArrowRight /></a>
            </div>
          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section style={{ background: 'var(--linen-soft)', padding: '120px 0' }}>
        <div className="container">
          <SectionHeader
            eyebrow="Philosophy"
            title="The way"
            italicTail="we work."
            kicker="There is no Zen house style. Each plan is drawn to the room and its owner. What stays the same is the discipline: calm, considered, turnkey, timeless."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', borderTop: '1px solid var(--line-strong)' }}>
            {window.ZEN_PHILOSOPHY.map((p, i, arr) => (
              <div key={p.word} style={{
                padding: '40px 28px 32px',
                borderRight: i < arr.length - 1 ? '1px solid var(--line-strong)' : 'none',
              }}>
                <div className="eyebrow">0{i+1}</div>
                <h3 className="display" style={{ fontSize: 38, margin: '12px 0 16px' }}>{p.word}</h3>
                <p style={{ color: 'var(--stone)', margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process Timeline */}
      <section className="container" style={{ paddingTop: 140, paddingBottom: 120 }}>
        <SectionHeader
          eyebrow="Process"
          title="From first call"
          italicTail="to the day you walk in."
          kicker="A turnkey project runs across six considered phases. We carry every phase in-house."
        />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, borderTop: '1px solid var(--ink)' }}>
          {[
            { n: '01', name: 'Discovery', body: 'A long, unhurried conversation about how you live.' },
            { n: '02', name: 'Concept', body: 'Plans, moodboards, material samples in hand.' },
            { n: '03', name: 'Design', body: 'Drawings, joinery, lighting, FF&E specification.' },
            { n: '04', name: 'Construction', body: 'Renovation, MEP coordination, on-site supervision.' },
            { n: '05', name: 'Fit-out', body: 'Bespoke joinery, finishes, installations.' },
            { n: '06', name: 'Styling', body: 'Furniture, art, objects, soft styling — final walkthrough.' },
          ].map((s, i, arr) => (
            <div key={s.n} style={{
              padding: '28px 20px 32px',
              borderRight: i < arr.length - 1 ? '1px solid var(--line)' : 'none',
              borderBottom: '1px solid var(--ink)',
            }}>
              <div className="display" style={{ fontSize: 22, color: 'var(--stone)' }}>{s.n}</div>
              <h3 className="display" style={{ fontSize: 24, margin: '10px 0 12px' }}>{s.name}</h3>
              <p style={{ color: 'var(--stone)', margin: 0, fontSize: 14 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Studio image strip */}
      <section style={{ padding: '0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
          {['media/project-burj-khalifa-residence-02.webp','media/project-grand-staircase.webp','media/project-volante-penthouse-04.webp'].map(src => (
            <div key={src} className="img-frame" style={{ aspectRatio: '3/4' }}>
              <img src={src} alt="" className="img-cover" />
            </div>
          ))}
        </div>
      </section>

      {/* Footprint */}
      <section className="container" style={{ paddingTop: 140, paddingBottom: 80 }}>
        <SectionHeader
          eyebrow="Footprint"
          title="Where we've"
          italicTail="worked."
          kicker="Zen Interiors is based in Dubai, with completed projects across the GCC and beyond. We travel for the right project."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 0, borderTop: '1px solid var(--line-strong)', borderBottom: '1px solid var(--line-strong)' }}>
          {[
            { region: 'United Arab Emirates', places: ['Dubai', 'Sharjah', 'Abu Dhabi'] },
            { region: 'GCC', places: ['Oman', 'Jordan'] },
            { region: 'Europe', places: ['Bulgaria'] },
            { region: 'Africa', places: ['Kenya', 'Seychelles'] },
            { region: 'South Asia', places: ['India', 'Maldives'] },
          ].map((r, i, arr) => (
            <div key={r.region} style={{
              padding: '28px 20px',
              borderRight: i < arr.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <div className="eyebrow">{r.region}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {r.places.map(p => (
                  <li key={p} className="display-italic" style={{ fontSize: 20, color: 'var(--clay-deep)' }}>{p}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="container" style={{ paddingTop: 60, paddingBottom: 60 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap', padding: '40px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
          <h3 className="display" style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', margin: 0, fontWeight: 300 }}>
            Begin a <span className="display-italic" style={{ color: 'var(--clay)' }}>conversation.</span>
          </h3>
          <button className="btn" onClick={openEnquiry}>Request a consultation <ArrowRight /></button>
        </div>
      </section>
    </main>
  );
}

// AWARDS --------------------------------------------------------------------
function AwardsPage({ navigate }) {
  const awards = window.ZEN_AWARDS;
  return (
    <main className="fade-in" data-screen-label="Awards">
      <section className="container" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="eyebrow">Recognition</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 144px)', margin: '20px 0 32px', lineHeight: 0.96, fontWeight: 300, letterSpacing: '-0.01em', maxWidth: '14ch' }}>
          International Property <span className="display-italic" style={{ color: 'var(--clay)' }}>Awards.</span>
        </h1>
        <p style={{ color: 'var(--stone)', maxWidth: 640, fontSize: 17 }}>
          The studio's published wins, attributed in full. Post-2014 recognition is omitted here until we re-collect and confirm with the studio.
        </p>
      </section>

      <section className="container" style={{ paddingTop: 60, paddingBottom: 80 }}>
        <div style={{ borderTop: '1px solid var(--ink)' }}>
          {awards.map((a, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '120px 1fr 1.4fr 1.6fr',
              padding: '40px 0', borderBottom: '1px solid var(--line)',
              alignItems: 'baseline', gap: 32,
            }}>
              <div className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, fontWeight: 300 }}>{a.year}</div>
              <div className="eyebrow">{a.body}</div>
              <div className="display-italic" style={{ fontSize: 28, color: 'var(--clay-deep)' }}>{a.category}</div>
              <div style={{ color: 'var(--ink)', fontSize: 17 }}>{a.project}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 60, padding: '32px 0', borderTop: '1px solid var(--line)' }}>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--stone)', textTransform: 'uppercase', margin: 0 }}>
            Note · All wins attributed to International Property Awards. Trophy artwork and certificates available on request.
            Post-2014 recognition to be re-collected before publishing.
          </p>
        </div>
      </section>

      {/* Press */}
      <section className="container" style={{ paddingTop: 60, paddingBottom: 100 }}>
        <SectionHeader eyebrow="In the press" title="Featured in" italicTail="" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', borderTop: '1px solid var(--line-strong)' }}>
          {window.ZEN_PRESS.map((p, i, arr) => (
            <div key={p} style={{
              padding: '32px 20px',
              borderRight: i < arr.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <div className="display" style={{ fontSize: 22, lineHeight: 1.2 }}>{p}</div>
              <div className="eyebrow" style={{ marginTop: 8, color: 'var(--stone-soft)' }}>Logo to be supplied</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

// SERVICES ------------------------------------------------------------------
function ServicesPage({ navigate, openEnquiry }) {
  const services = window.ZEN_SERVICES;

  return (
    <main className="fade-in" data-screen-label="Services">
      <section className="container" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="eyebrow">Services</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 144px)', margin: '20px 0 32px', lineHeight: 0.96, fontWeight: 300, letterSpacing: '-0.01em', maxWidth: '14ch' }}>
          Concept to <span className="display-italic" style={{ color: 'var(--clay)' }}>keys.</span>
        </h1>
        <p style={{ color: 'var(--stone)', maxWidth: 640, fontSize: 17 }}>
          Three service lines, often combined on a single brief. We carry the project end-to-end — the design that arrives matches the design that was drawn.
        </p>
      </section>

      {services.map((s, i) => (
        <section id={s.key} key={s.key}
          style={{
            background: i % 2 === 0 ? 'var(--paper)' : 'var(--linen-soft)',
            padding: '120px 0',
            borderTop: '1px solid var(--line)',
          }}>
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 'clamp(40px, 8vw, 120px)', alignItems: 'start' }}>
              <div>
                <div className="display" style={{ fontSize: 22, color: 'var(--stone)' }}>0{i+1}</div>
                <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: '14px 0 24px', lineHeight: 1.02, fontWeight: 300 }}>
                  {s.name.split(' ')[0]}
                  <br />
                  <span className="display-italic" style={{ color: 'var(--clay)' }}>{s.name.split(' ').slice(1).join(' ') || 'design.'}</span>
                </h2>
                <p style={{ color: 'var(--stone)', maxWidth: 380, margin: 0, fontSize: 17 }}>{s.line}</p>
              </div>
              <div>
                <p style={{ fontSize: 19, lineHeight: 1.65, color: 'var(--ink)', maxWidth: 640, margin: 0 }}>{s.body}</p>
                <div style={{ marginTop: 48 }}>
                  <div className="eyebrow">Deliverables</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 0, marginTop: 16, borderTop: '1px solid var(--line-strong)' }}>
                    {s.deliverables.map((d, j) => (
                      <div key={j} style={{
                        padding: '18px 4px',
                        borderBottom: '1px solid var(--line)',
                        display: 'flex', alignItems: 'center', gap: 14,
                      }}>
                        <span className="display" style={{ fontSize: 14, color: 'var(--stone)' }}>{String(j+1).padStart(2,'0')}</span>
                        <span style={{ fontSize: 16 }}>{d}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{ marginTop: 36 }}>
                  <button className="btn" onClick={openEnquiry}>Enquire about {s.name.split(' ')[0].toLowerCase()} <ArrowRight /></button>
                </div>
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* Additional services list */}
      <section className="container" style={{ paddingTop: 120, paddingBottom: 120 }}>
        <SectionHeader eyebrow="Also" title="Also offered" italicTail="alongside." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 0, borderTop: '1px solid var(--line-strong)' }}>
          {[
            'Space planning',
            'Project management',
            'Colour consultation',
            'Home theatre design',
            'Custom blinds & shades',
            'Art selection & curation',
            'Home staging',
            'Renovation supervision',
          ].map((d, j, arr) => (
            <div key={j} style={{
              padding: '28px 24px',
              borderRight: (j + 1) % 4 !== 0 ? '1px solid var(--line)' : 'none',
              borderBottom: '1px solid var(--line)',
            }}>
              <div className="display" style={{ fontSize: 22 }}>{d}</div>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--stone)', textTransform: 'uppercase' }}>
          In-house joinery / MEP scope to be confirmed with the studio.
        </p>
      </section>
    </main>
  );
}

// CONTACT -------------------------------------------------------------------
function ContactPage({ openEnquiry }) {
  const c = window.ZEN_CONTACT;
  return (
    <main className="fade-in" data-screen-label="Contact">
      <section className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="eyebrow">Contact</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 144px)', margin: '20px 0 32px', lineHeight: 0.96, fontWeight: 300, letterSpacing: '-0.01em', maxWidth: '14ch' }}>
          We'd like to <span className="display-italic" style={{ color: 'var(--clay)' }}>hear from you.</span>
        </h1>
      </section>

      <section className="container" style={{ paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'clamp(40px, 6vw, 96px)' }}>
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
              <div>
                <div className="eyebrow">Showroom</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {c.addressLines.map((l, i) => <li key={i} style={{ fontSize: 16 }}>{l}</li>)}
                </ul>
                <p style={{ marginTop: 14, fontStyle: 'italic', color: 'var(--stone)', fontSize: 14 }}>{c.hoursNote}</p>
              </div>

              <div>
                <div className="eyebrow">Reach us</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
                  <li><a href={c.phoneHref} style={{ borderBottom: '1px solid var(--ink)', fontSize: 18 }}>{c.phone}</a></li>
                  <li><a href={`mailto:${c.email}`} style={{ borderBottom: '1px solid var(--ink)', fontSize: 18 }}>{c.email}</a></li>
                  <li style={{ color: 'var(--stone)', fontStyle: 'italic', fontSize: 14 }}>WhatsApp — number to be confirmed</li>
                </ul>
              </div>
            </div>

            {/* Map placeholder */}
            <div style={{ marginTop: 56, background: 'var(--linen-soft)', aspectRatio: '16/9', position: 'relative', overflow: 'hidden', border: '1px solid var(--line)' }}>
              {/* abstract map: hairline grid + a marker — coords TBC */}
              <svg viewBox="0 0 800 450" width="100%" height="100%" preserveAspectRatio="none">
                <defs>
                  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--line-strong)" strokeWidth="0.4" />
                  </pattern>
                </defs>
                <rect width="800" height="450" fill="url(#grid)" />
                <path d="M120 220 Q300 140 480 220 T780 180" stroke="var(--clay)" strokeWidth="1.4" fill="none" />
                <path d="M0 320 Q200 380 400 340 T800 320" stroke="var(--stone-soft)" strokeWidth="1" fill="none" />
                <circle cx="380" cy="210" r="8" fill="var(--ink)" />
                <circle cx="380" cy="210" r="22" stroke="var(--ink)" strokeWidth="1" fill="none" opacity="0.4" />
                <circle cx="380" cy="210" r="40" stroke="var(--ink)" strokeWidth="1" fill="none" opacity="0.2" />
                <text x="395" y="200" fontFamily="JetBrains Mono" fontSize="11" fill="var(--ink)" letterSpacing="1.2">AL BARSHA 1</text>
              </svg>
              <div style={{ position: 'absolute', bottom: 14, right: 14, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--stone)', textTransform: 'uppercase' }}>
                Map · coords to be confirmed
              </div>
            </div>
          </div>

          <div>
            <div className="eyebrow">By appointment</div>
            <h3 className="display" style={{ fontSize: 'clamp(28px, 3.2vw, 40px)', margin: '14px 0 24px', lineHeight: 1.1, fontWeight: 300 }}>
              Visit the <span className="display-italic" style={{ color: 'var(--clay)' }}>showroom</span> in Al Barsha.
            </h3>
            <p style={{ color: 'var(--stone)', margin: 0 }}>
              Our showroom holds a working library of materials, finishes, and pieces drawn from past commissions. We meet by appointment — give us a little notice so we can lay out samples for your project.
            </p>
            <div style={{ marginTop: 36 }}>
              <button className="btn" onClick={openEnquiry}>Request a visit <ArrowRight /></button>
            </div>

            <hr className="rule" style={{ margin: '56px 0 28px' }} />

            <div className="eyebrow">Working languages</div>
            <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 14 }}>
              {['English', 'العربية · Arabic', 'Русский · Russian', '中文 · Chinese'].map(l => (
                <span key={l} style={{
                  padding: '8px 14px',
                  border: '1px solid var(--line-strong)',
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                }}>{l}</span>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// JOURNAL (placeholder) -----------------------------------------------------
function JournalPage({ navigate }) {
  return (
    <main className="fade-in container" style={{ paddingTop: 120, paddingBottom: 160 }} data-screen-label="Journal">
      <div className="eyebrow">Journal · Phase 2</div>
      <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 144px)', margin: '20px 0 28px', lineHeight: 0.96, fontWeight: 300 }}>
        Notes &amp; <span className="display-italic" style={{ color: 'var(--clay)' }}>insights.</span>
      </h1>
      <p style={{ color: 'var(--stone)', maxWidth: 560, fontSize: 17 }}>
        The studio journal — material studies, project notes, conversations with craftspeople — opens in Phase 2 once we have content with the client.
      </p>
      <div style={{ marginTop: 40 }}>
        <button className="btn btn-ghost" onClick={() => navigate('/projects')}>View projects instead <ArrowRight /></button>
      </div>
    </main>
  );
}

window.AboutPage = AboutPage;
window.AwardsPage = AwardsPage;
window.ServicesPage = ServicesPage;
window.ContactPage = ContactPage;
window.JournalPage = JournalPage;