// services.jsx — Styling, Planning, Flowers & Stationery pages
// About + Journal + Contact

function ServicePage({ which, lang, onNav }) {
  const ar = lang === 'ar';
  const s = SERVICES.find(x => x.key === which) || SERVICES[0];
  const otherServices = SERVICES.filter(x => x.key !== which);

  return (
    <main className="page-enter">
      {/* Hero */}
      <section style={{ paddingTop: 100, paddingBottom: 80 }}>
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1.05fr 1fr', gap: 80, alignItems:'end' }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>{s.eyebrow}</div>
              <h1 className="h-display" style={{ fontSize:'clamp(64px, 8vw, 144px)', margin:'24px 0 0' }}>
                {which === 'styling' && <>The <em>art</em> of<br/><S>styling</S> a day.</>}
                {which === 'planning' && <>The <em>quiet</em> work of<br/>full <S>planning.</S></>}
                {which === 'flowers' && <>Flowers,<br/><S>paper</S>, every<br/>tiny <em>detail.</em></>}
              </h1>
              <p className="lede" style={{ marginTop: 36, maxWidth: 560 }}>
                {s.blurb}
              </p>
              <div style={{ marginTop: 36, display:'flex', gap: 12, flexWrap:'wrap' }}>
                <button className="btn btn--gold" onClick={()=>onNav('contact')}>Enquire about {s.title.toLowerCase()} <Icon.Arrow/></button>
                <a className="btn btn--ghost" href="https://wa.me/971551304916" target="_blank" rel="noopener"><Icon.Whatsapp/> WhatsApp Joelle</a>
              </div>
            </div>
            <div className="frame frame--tall">
              <img src={s.cover} alt=""/>
              <div className="photo-credit">Photographer credit · client to confirm</div>
            </div>
          </div>
        </div>
      </section>

      {/* What's included */}
      <section className="section" style={{ background:'var(--cream)' }}>
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.6fr', gap: 80, alignItems:'start' }}>
            <div style={{ position:'sticky', top: 100 }}>
              <div className="eyebrow"><span className="dot"></span>{ar?'مايتضمنه':'What\'s included'}</div>
              <h2 className="h-display" style={{ fontSize:'clamp(36px, 4.4vw, 64px)', margin:'18px 0 24px', fontWeight: 300 }}>
                <em>{s.tag}.</em>
              </h2>
              <p style={{ color:'var(--ink-soft)', fontSize: 15, lineHeight: 1.7, margin: 0 }}>
                {which === 'styling' && 'No fixed tiers, no off-the-shelf packages. Everything is scoped to your couple, your venue, your budget.'}
                {which === 'planning' && 'When you need more than styling. Full coordination from the first vendor call to the last guest leaving.'}
                {which === 'flowers' && 'Florals are designed alongside the styling and delivered through our sister brand. Stationery is designed in-house.'}
              </p>
              <div style={{ marginTop: 32, fontSize: 12, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-muted)' }}>
                <Icon.Check style={{ width: 12, height: 12, color: 'var(--accent-deep)', marginRight: 8, verticalAlign:'middle' }}/>
                Bespoke · no published prices
              </div>
            </div>

            <ul style={{ listStyle:'none', padding:0, margin:0, borderTop:'1px solid var(--line)' }}>
              {s.inclusions.map((inc, i) => (
                <li key={inc.name} style={{ padding:'36px 0', borderBottom:'1px solid var(--line)', display:'grid', gridTemplateColumns:'60px 1fr 24px', gap: 24, alignItems:'baseline' }}>
                  <span style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 22, color:'var(--accent-deep)' }}>0{i+1}</span>
                  <div>
                    <h3 className="h-display" style={{ fontSize: 32, fontWeight: 300, margin:'0 0 10px' }}>{inc.name}</h3>
                    <p style={{ color:'var(--ink-soft)', fontSize: 15, lineHeight: 1.7, margin: 0 }}>{inc.detail}</p>
                  </div>
                  <Icon.Plus style={{ color:'var(--ink-soft)' }}/>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Three-step process */}
      {which !== 'flowers' && (
        <section className="section">
          <div className="wrap">
            <SectionHead
              eyebrow={ar?'العملية':'The process'}
              title={<>Three simple <em>steps.</em></>}
              kicker="Consult → design → get married in style. That's it."
              align="center"
            />
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0, marginTop: 56 }}>
              {[
                { n: '01', t: 'Consultation', d: 'A phone call or coffee chat — we listen, we ask, we figure out if you need styling-only or full planning.' },
                { n: '02', t: 'We design', d: 'Joelle drafts the personal styling proposal: every chair, every flower, every menu — itemised against your budget.' },
                { n: '03', t: 'You get married in style', d: 'Setup, on-the-day, breakdown. You show up. We sweat the details. We can\'t wait to make it happen.' },
              ].map((step, i) => (
                <div key={step.n} style={{
                  padding:'40px 36px',
                  borderLeft: '1px solid var(--line)',
                  borderRight: i === 2 ? '1px solid var(--line)' : 'none',
                  textAlign:'center',
                }}>
                  <div className="script" style={{ fontSize: 64, color:'var(--accent)', lineHeight: 1 }}>{step.n}</div>
                  <h3 className="h-display" style={{ fontSize: 28, fontStyle:'italic', fontWeight: 300, margin:'24px 0 16px' }}>{step.t}</h3>
                  <p style={{ color:'var(--ink-soft)', fontSize: 15, lineHeight: 1.7, margin: 0 }}>{step.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Flowers special block: sister brand credit */}
      {which === 'flowers' && (
        <section className="section">
          <div className="wrap">
            <div style={{ background:'var(--ink)', color:'var(--paper)', padding:'72px 64px', borderRadius: 8, display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 56, alignItems:'center' }}>
              <div className="frame frame--square">
                <img src="media/floral-tlfs.webp" alt=""/>
              </div>
              <div>
                <div className="eyebrow" style={{ color:'rgba(251,248,244,.65)' }}>Sister brand</div>
                <h2 className="h-display" style={{ fontSize:'clamp(38px, 4.2vw, 64px)', color:'var(--paper)', margin:'18px 0 24px', fontWeight: 300 }}>
                  Florals by <em>The Lovely</em><br/><S color="var(--accent)">Flower Shop.</S>
                </h2>
                <p style={{ color:'rgba(251,248,244,.8)', fontSize: 16, lineHeight: 1.7, maxWidth: 520 }}>
                  Co-founded by Joelle and Mona, The Lovely Flower Shop is our sister flower studio in Dubai. Wedding florals are designed for you and delivered through TLFS — same hands, same care.
                </p>
                <div style={{ marginTop: 24, fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(251,248,244,.5)' }}>
                  A separate brand · linked, not merged
                </div>
                <a href="#" className="btn btn--gold" style={{ marginTop: 28 }}>Visit TLFS <Icon.Arrow/></a>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Cross-sell other services */}
      <section className="section-sm" style={{ background:'var(--paper-deep)' }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 24 }}><span className="dot"></span>{ar?'كذلك':'You might also need'}</div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 22 }}>
            {otherServices.map(o => (
              <button key={o.key} onClick={()=>onNav(o.key)}
                style={{ background:'var(--paper)', border:'1px solid var(--line)', borderRadius: 6, padding: 0, textAlign:'left', cursor:'pointer', display:'grid', gridTemplateColumns:'180px 1fr', overflow:'hidden', alignItems:'stretch' }}>
                <div className="frame frame--square" style={{ aspectRatio:'auto' }}>
                  <img src={o.cover} alt=""/>
                </div>
                <div style={{ padding: '24px 28px', display:'flex', flexDirection:'column', justifyContent:'center' }}>
                  <div className="eyebrow" style={{ color:'var(--accent-deep)' }}>{o.eyebrow}</div>
                  <h3 className="h-display" style={{ fontSize: 28, fontStyle:'italic', fontWeight: 300, margin: '10px 0 8px' }}>{o.title}</h3>
                  <span style={{ fontSize: 12, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-soft)' }}>{o.tag} <Icon.Arrow style={{ width: 12, height: 12, marginLeft: 6, verticalAlign:'middle' }}/></span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <EnquireFooter ar={ar} onNav={onNav}/>
    </main>
  );
}

// ---------------------------------------------------------------
function About({ lang, onNav }) {
  const ar = lang === 'ar';
  return (
    <main className="page-enter">
      {/* Hero portrait + intro */}
      <section style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 80, alignItems:'center' }}>
            <div className="frame frame--portrait">
              <img src="media/joelle.webp" alt="Joelle, founder & lead stylist"/>
              <div className="photo-credit">Founder portrait · to be replaced with hi-res</div>
            </div>
            <div>
              <div className="eyebrow"><span className="dot"></span>{ar?'تعرّفي على جويل':'Meet Joelle'}</div>
              <h1 className="h-display" style={{ fontSize:'clamp(56px, 7vw, 120px)', margin:'24px 0 0' }}>
                <em>Hi —</em><br/>I'm <S>Joelle.</S>
              </h1>
              <p className="lede" style={{ marginTop: 32, maxWidth: 560 }}>
                {ar
                  ? '"أعمل بحب على مساعدة الأزواج في تحقيق أحلامهم ضمن ميزانيات واقعية، في أجواء حميمية. اللمسات الصغيرة الشخصية هي ما يجعل يومكِ… يومكِ."'
                  : '"I thrive on the challenge of helping couples realise their wedding dreams on realistic budgets and in intimate settings. The small, personal touches make your day exactly that — personal."'}
              </p>
              <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.75, color:'var(--ink-soft)', maxWidth: 560 }}>
                I started <em>My Lovely Wedding</em> as a blog in May 2012, while I was planning my own wedding. Twelve years and a few hundred weddings later, it's still the same idea: be the wedding friend you always wanted. That's it.
              </p>
              <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.75, color:'var(--ink-soft)', maxWidth: 560 }}>
                I'm also a florist (co-founder of <a href="#" className="link-accent">The Lovely Flower Shop</a>), a tablescape obsessive, and a believer that the best weddings mix the high and the low — even an IKEA tablemat, if it makes the day feel like you.
              </p>
              <div style={{ marginTop: 32, display:'flex', gap: 12 }}>
                <button className="btn btn--gold" onClick={()=>onNav('contact')}>Let's chat <Icon.Arrow/></button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section" style={{ background:'var(--cream)' }}>
        <div className="wrap">
          <SectionHead eyebrow="The Team" title={<>The <em>people</em> behind your day.</>} align="center" kicker="A small, hands-on studio. Joelle on styling and florals; Mona on stationery and TLFS; Kara on planning. All confirmed roles — surnames to be updated by the client."/>

          <div style={{ marginTop: 56, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 32 }}>
            {[
              { name:'Joelle', role:'Founder · Stylist · Florist', bio:'Twelve+ years styling Dubai weddings. The first call, the personal styling proposal, the day-of decisions.', img:'media/joelle.webp' },
              { name:'Mona',   role:'Stationery · TLFS co-founder', bio:'Menus, signage, seating plans, semi-custom invitation suites. Also the co-founder of our sister brand.', img:'media/floral-tlfs.webp' },
              { name:'Kara',   role:'Planning · Coordination', bio:'Vendor sourcing, contracts, run-of-show, on-the-day. The reason it all stays on the rails.', img:'media/wed-2016-table.webp' },
            ].map((p) => (
              <div key={p.name}>
                <div className="frame frame--portrait">
                  <img src={p.img} alt=""/>
                </div>
                <div style={{ marginTop: 20 }}>
                  <h3 className="h-display" style={{ fontSize: 28, fontStyle:'italic', fontWeight: 300, margin: 0 }}>{p.name}</h3>
                  <div style={{ fontSize: 12, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--accent-deep)', marginTop: 6 }}>{p.role}</div>
                  <p style={{ marginTop: 14, color:'var(--ink-soft)', fontSize: 14, lineHeight: 1.7 }}>{p.bio}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="section">
        <div className="wrap">
          <SectionHead eyebrow="Kind Words" title={<>What couples <S>tell</S> us.</>} align="center"/>
          <div style={{ marginTop: 32, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 32 }}>
            {TESTIMONIALS.map((t, i) => (
              <blockquote key={i} style={{ margin: 0, padding: '36px 32px', background:'var(--paper-deep)', border:'1px solid var(--line)', borderRadius: 6, display:'flex', flexDirection:'column' }}>
                <span className="ornament" style={{ fontSize: 56, marginBottom: -16, lineHeight: 0.4 }}>“</span>
                <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight: 300, fontSize: 19, lineHeight: 1.5, color:'var(--ink)', margin: '0 0 24px', flex: 1 }}>
                  {t.quote}
                </p>
                <div style={{ fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-soft)' }}>
                  {t.attribution}
                </div>
                <div style={{ fontSize: 10, color:'var(--ink-muted)', marginTop: 6, letterSpacing:'0.12em', textTransform:'uppercase' }}>
                  {t.note}
                </div>
              </blockquote>
            ))}
          </div>
        </div>
      </section>

      {/* Press wall */}
      <section className="section-sm" style={{ background:'var(--ink)', color:'var(--paper)' }}>
        <div className="wrap">
          <div className="eyebrow" style={{ textAlign:'center', color:'rgba(251,248,244,.6)', marginBottom: 36 }}>
            As featured in
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0, borderTop:'1px solid rgba(251,248,244,.18)', borderLeft:'1px solid rgba(251,248,244,.18)' }}>
            {PRESS.map(p => (
              <div key={p} style={{
                padding:'36px 24px',
                borderRight:'1px solid rgba(251,248,244,.18)',
                borderBottom:'1px solid rgba(251,248,244,.18)',
                textAlign:'center',
                fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight: 300,
                fontSize: 18, color:'rgba(251,248,244,.85)',
              }}>
                {p}
              </div>
            ))}
          </div>
          <p style={{ marginTop: 24, fontSize: 11, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(251,248,244,.4)', textAlign:'center' }}>
            Press logos to be rights-cleared before publishing
          </p>
        </div>
      </section>

      <EnquireFooter ar={ar} onNav={onNav}/>
    </main>
  );
}

// ---------------------------------------------------------------
function Journal({ lang, onNav }) {
  const ar = lang === 'ar';
  const featured = JOURNAL[0];
  const rest = JOURNAL.slice(1);
  return (
    <main className="page-enter">
      <section style={{ paddingTop: 100, paddingBottom: 80 }}>
        <div className="wrap">
          <div style={{ textAlign:'center', maxWidth: 760, margin:'0 auto 60px' }}>
            <div className="eyebrow"><span className="dot"></span>{ar?'المدونة منذ ٢٠١٢':'The Journal — since 2012'}</div>
            <h1 className="h-display" style={{ fontSize:'clamp(56px, 7vw, 112px)', margin:'24px 0 0' }}>
              <em>Lots of</em><br/>
              pretty <S>inspiration.</S>
            </h1>
            <p className="lede" style={{ marginTop: 28 }}>
              Twelve years of venue guides, real wedding features, budget honesty and tablescape rabbit-holes — written by Joelle, mostly with a cup of tea.
            </p>
          </div>

          {/* Featured */}
          <a href="#" style={{ display:'block', color:'inherit' }}>
            <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 56, alignItems:'center' }}>
              <div className="frame frame--wide">
                <img src={featured.img} alt=""/>
              </div>
              <div>
                <div className="eyebrow" style={{ color:'var(--accent-deep)' }}>Featured · {featured.tag}</div>
                <h2 className="h-display" style={{ fontSize:'clamp(36px, 4vw, 56px)', fontWeight: 300, margin:'18px 0 20px', lineHeight: 1 }}>
                  <em>{featured.title}</em>
                </h2>
                <p style={{ color:'var(--ink-soft)', fontSize: 16, lineHeight: 1.7 }}>
                  Where to actually have your Dubai wedding — and what each venue costs you in vibes. From One&Only to a private villa in the desert.
                </p>
                <div style={{ marginTop: 24, fontSize: 12, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-muted)' }}>{featured.read}</div>
              </div>
            </div>
          </a>

          {/* Tag chips */}
          <div style={{ marginTop: 72, display:'flex', gap: 12, flexWrap:'wrap', justifyContent:'center' }}>
            {['All', 'Venues', 'Planning', 'Styling', 'Real Weddings', 'Florals', 'Stationery'].map((t, i) => (
              <span key={t} className={"chip-radio " + (i === 0 ? 'is-on' : '')}>{t}</span>
            ))}
          </div>

          {/* List */}
          <div style={{ marginTop: 48, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 32 }}>
            {rest.map((j, i) => (
              <a key={i} href="#" style={{ color:'inherit' }}>
                <div className="frame frame--portrait">
                  <img src={j.img} alt=""/>
                </div>
                <div style={{ marginTop: 18 }}>
                  <div className="eyebrow" style={{ color:'var(--accent-deep)' }}>{j.tag}</div>
                  <h3 className="h-display" style={{ fontSize: 24, fontStyle:'italic', fontWeight: 300, margin:'10px 0 8px', lineHeight: 1.2 }}>{j.title}</h3>
                  <div style={{ fontSize: 12, color:'var(--ink-muted)' }}>{j.read}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <EnquireFooter ar={ar} onNav={onNav}/>
    </main>
  );
}

// ---------------------------------------------------------------
// Small shared CTA band
function EnquireFooter({ ar, onNav }) {
  return (
    <section style={{ position:'relative', padding:'120px 0', background:'var(--paper-deep)', overflow:'hidden' }}>
      <div className="wrap" style={{ textAlign:'center' }}>
        <span className="script" style={{ fontSize: 80, color:'var(--accent)', lineHeight: 1 }}>Let's plan it</span>
        <h2 className="h-display" style={{ fontSize:'clamp(40px, 5vw, 76px)', fontWeight: 300, margin:'0 0 28px', lineHeight: 1 }}>
          <em>together.</em>
        </h2>
        <p className="lede" style={{ maxWidth: 580, margin:'0 auto 36px' }}>
          {ar?'املئي الاستمارة أو دردشي معي على واتساب — أحبّ كل عرس مهما كان حجمه.':'Send the enquiry form or message me on WhatsApp — I love every wedding, big or small.'}
        </p>
        <div style={{ display:'inline-flex', gap: 12, flexWrap:'wrap' }}>
          <button className="btn" onClick={()=>onNav('contact')}>Send an enquiry <Icon.Arrow/></button>
          <a className="btn btn--ghost" href="https://wa.me/971551304916" target="_blank" rel="noopener"><Icon.Whatsapp/> WhatsApp</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicePage, About, Journal, EnquireFooter });