/* global React, Icon, Imagery, Reveal, SectionHeader, Accordion, SERVICES, APPROACHES, TEAM, TESTIMONIALS, FAQS, TRUST_INDICATORS */
const { useState: useStateP, useEffect: useEffectP } = React;

/* ─────────────────────────────────────────────
   HOME
   ───────────────────────────────────────────── */
const HomePage = ({ onNavigate, heroVariant = 'editorial' }) => {
  return (
    <div className="page">
      <Hero variant={heroVariant} onNavigate={onNavigate} />
      <ShifaMeaning />
      <ServicesOverview onNavigate={onNavigate} />
      <Approach />
      <MuslimFamily />
      <TeamPreview onNavigate={onNavigate} />
      <WorkshopsBlock onNavigate={onNavigate} />
      <Testimonials />
      <FAQPreview onNavigate={onNavigate} />
      <FinalCTA onNavigate={onNavigate} />
      <ContactBlock />
    </div>
  );
};

/* HERO */
const Hero = ({ variant, onNavigate }) => {
  if (variant === 'image') return <HeroImage onNavigate={onNavigate} />;
  if (variant === 'centered') return <HeroCentered onNavigate={onNavigate} />;
  return <HeroEditorial onNavigate={onNavigate} />;
};

const HeroEditorial = ({ onNavigate }) => (
  <section style={{ paddingTop: 180, paddingBottom: 80, position: 'relative' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, alignItems: 'center' }} className="hero-grid">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 28 }}>
            <span className="dot" />A space for healing
          </div>
          <h1 style={{ marginBottom: 32 }}>
            Comprehensive healing for the <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>mind, heart,</em> and family.
          </h1>
          <p className="lede" style={{ maxWidth: 540, marginBottom: 40 }}>
            Shifa Services provides counselling, psychotherapy, family support, consultation, and spiritually aware care for individuals, couples, youth, families, and communities.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 56 }}>
            <button className="btn btn-primary" onClick={() => onNavigate('contact')}>
              Book an Initial Consultation <Icon name="arrow" size={16} />
            </button>
            <button className="btn btn-secondary" onClick={() => onNavigate('services')}>
              Explore Services
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, maxWidth: 520 }}>
            {TRUST_INDICATORS.map((t, i) => (
              <Reveal key={i} delay={i * 80}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: '#4a4a42', fontSize: 13 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--cream)', border: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest)' }}>
                    <Icon name={t.icon} size={16} />
                  </span>
                  {t.label}
                </div>
              </Reveal>
            ))}
          </div>
        </Reveal>
        <Reveal delay={150}>
          <div style={{ position: 'relative' }}>
            <Imagery variant="hero" aspect="4/5" style={{ borderRadius: 8 }} />
            <div style={{ position: 'absolute', bottom: -28, left: -28, background: 'var(--cream)', padding: '20px 24px', borderRadius: 12, border: '1px solid var(--line-soft)', maxWidth: 260, boxShadow: '0 30px 60px -30px rgba(58,74,58,0.25)' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}><span className="dot" />Shifa</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--forest-deep)', fontStyle: 'italic' }}>
                Healing. Restoration. Renewal.
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr !important; gap: 60px !important; } }`}</style>
  </section>
);

const HeroCentered = ({ onNavigate }) => (
  <section style={{ paddingTop: 200, paddingBottom: 100, textAlign: 'center', position: 'relative' }}>
    <div className="container-narrow">
      <Reveal>
        <div className="eyebrow" style={{ marginBottom: 28, justifyContent: 'center' }}>
          <span className="dot" />A space for healing
        </div>
        <h1 style={{ marginBottom: 32, fontSize: 'clamp(48px, 7vw, 104px)' }}>
          Comprehensive healing for the <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>mind, heart,</em> and family.
        </h1>
        <p className="lede" style={{ maxWidth: 620, margin: '0 auto 44px' }}>
          Shifa Services provides counselling, psychotherapy, family support, consultation, and spiritually aware care for individuals, couples, youth, families, and communities.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => onNavigate('contact')}>
            Book an Initial Consultation <Icon name="arrow" size={16} />
          </button>
          <button className="btn btn-secondary" onClick={() => onNavigate('services')}>
            Explore Services
          </button>
        </div>
      </Reveal>
      <Reveal delay={200}>
        <div style={{ marginTop: 80, display: 'flex', justifyContent: 'center', gap: 48, flexWrap: 'wrap' }}>
          {TRUST_INDICATORS.map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#4a4a42', fontSize: 13 }}>
              <Icon name={t.icon} size={16} />{t.label}
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

const HeroImage = ({ onNavigate }) => (
  <section style={{ padding: 0, position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'flex-end' }}>
    <div style={{ position: 'absolute', inset: 0 }}>
      <Imagery variant="foliage" aspect="auto" style={{ position: 'absolute', inset: 0, borderRadius: 0 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(42,55,42,0.3) 0%, rgba(42,55,42,0.7) 100%)' }} />
    </div>
    <div className="container" style={{ position: 'relative', padding: '180px 32px 80px' }}>
      <Reveal>
        <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 28 }}>
          <span className="dot" style={{ background: 'var(--gold-soft)' }} />A space for healing
        </div>
        <h1 style={{ color: 'var(--cream)', maxWidth: 880, marginBottom: 32 }}>
          Comprehensive healing for the <em style={{ fontStyle: 'italic', color: 'var(--gold-soft)' }}>mind, heart,</em> and family.
        </h1>
        <p className="lede" style={{ color: 'rgba(251,247,239,0.85)', maxWidth: 540, marginBottom: 40 }}>
          Shifa Services provides counselling, psychotherapy, family support, consultation, and spiritually aware care for individuals, couples, youth, families, and communities.
        </p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <button className="btn btn-primary" style={{ background: 'var(--cream)', color: 'var(--forest-deep)' }} onClick={() => onNavigate('contact')}>
            Book an Initial Consultation <Icon name="arrow" size={16} />
          </button>
          <button className="btn btn-secondary" style={{ color: 'var(--cream)', borderColor: 'rgba(251,247,239,0.3)' }} onClick={() => onNavigate('services')}>
            Explore Services
          </button>
        </div>
      </Reveal>
    </div>
  </section>
);

/* SHIFA MEANING */
const ShifaMeaning = () => (
  <section style={{ background: 'var(--cream)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 100, alignItems: 'center' }} className="meaning-grid">
        <Reveal>
          <Imagery variant="meaning" aspect="5/6" style={{ borderRadius: 8 }} />
        </Reveal>
        <Reveal delay={120}>
          <div className="eyebrow" style={{ marginBottom: 22 }}>
            <span className="dot" />The meaning of Shifa
          </div>
          <h2 style={{ marginBottom: 28 }}>
            Shifa is an Arabic word reflecting <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>healing, restoration, and renewal</em>.
          </h2>
          <p className="lede" style={{ marginBottom: 24 }}>
            At Shifa Services, care is approached with attention to the whole person, including emotional well-being, family relationships, lived experience, cultural context, and spiritual grounding.
          </p>
          <p style={{ color: '#5a5a52' }}>
            We believe healing is rarely linear. It moves at the pace of trust, and it begins in spaces where a person feels seen, respected, and held with care.
          </p>
        </Reveal>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .meaning-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
  </section>
);

/* SERVICES OVERVIEW */
const ServicesOverview = ({ onNavigate }) => (
  <section>
    <div className="container">
      <SectionHeader
        eyebrow="Services"
        title="Support for every stage of life."
        lede="Whether you are navigating anxiety, depression, family conflict, marriage challenges, parenting, child welfare, or major transitions, Shifa offers thoughtful support in a private, respectful environment."
      />
      <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="svc-grid">
        {SERVICES.map((s, i) => (
          <Reveal key={i} delay={(i % 3) * 80}>
            <div className="card" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
              <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--ivory)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest)', marginBottom: 24 }}>
                <Icon name={s.icon} size={22} />
              </div>
              <h4 style={{ marginBottom: 12 }}>{s.title}</h4>
              <p style={{ fontSize: 14, color: '#5a5a52', marginBottom: 24, flex: 1 }}>{s.body}</p>
              <a className="link-arrow" onClick={() => onNavigate('services')}>
                Learn more
                <Icon name="arrow" size={14} />
              </a>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr !important; } }
      @media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>
);

/* APPROACH */
const Approach = () => (
  <section style={{ background: 'var(--forest-deep)', color: 'var(--cream)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-start' }} className="appr-grid">
        <Reveal>
          <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 22 }}>
            <span className="dot" style={{ background: 'var(--gold-soft)' }} />Our approach
          </div>
          <h2 style={{ color: 'var(--cream)', marginBottom: 28 }}>
            Care that <em style={{ fontStyle: 'italic', color: 'var(--gold-soft)' }}>meets you</em> where you are.
          </h2>
          <p className="lede" style={{ color: 'rgba(251,247,239,0.78)' }}>
            Shifa Services uses a client-centred, flexible approach to help individuals, couples, and families develop treatment goals that reflect their needs. Support may include CBT, DBT, narrative therapy, solution-focused therapy, and other approaches tailored to the client.
          </p>
        </Reveal>
        <Reveal delay={150}>
          <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 22 }}>Areas of support</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {APPROACHES.map((a, i) => (
              <span key={i} style={{ padding: '10px 18px', border: '1px solid rgba(251,247,239,0.2)', borderRadius: 999, fontSize: 13, color: 'rgba(251,247,239,0.85)', background: 'rgba(251,247,239,0.04)' }}>
                {a}
              </span>
            ))}
          </div>
        </Reveal>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .appr-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
  </section>
);

/* MUSLIM FAMILY */
const MuslimFamily = () => (
  <section>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 100, alignItems: 'center' }} className="mf-grid">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 22 }}><span className="dot" />Spiritually aware care</div>
          <h2 style={{ marginBottom: 28 }}>
            Professional support with <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>cultural and spiritual</em> understanding.
          </h2>
          <p className="lede" style={{ marginBottom: 24 }}>
            Shifa Services supports Muslim individuals, couples, and families seeking care that understands faith, family, community, and cultural context.
          </p>
          <p style={{ color: '#5a5a52', marginBottom: 32 }}>
            Services may include marriage support, premarital counselling, family mediation, child welfare support, separation agreements, and spiritually informed family guidance — offered alongside evidence-based clinical practice.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {['Faith-informed', 'Confidential', 'Inclusive', 'Family-centred'].map((t, i) => (
              <span key={i} className="tag">{t}</span>
            ))}
          </div>
        </Reveal>
        <Reveal delay={150}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Imagery variant="faithA" aspect="3/4" style={{ borderRadius: 8 }} />
            <Imagery variant="faithB" aspect="3/4" style={{ borderRadius: 8, marginTop: 40 }} />
          </div>
        </Reveal>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .mf-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
  </section>
);

/* TEAM PREVIEW */
const TeamPreview = ({ onNavigate }) => (
  <section style={{ background: 'var(--cream)' }}>
    <div className="container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 32, flexWrap: 'wrap' }}>
        <SectionHeader eyebrow="The team" title="Meet the Shifa Services team." style={{ marginBottom: 0 }} />
        <button className="btn btn-secondary" onClick={() => onNavigate('team')}>
          View full team <Icon name="arrow" size={16} />
        </button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="team-grid">
        {TEAM.map((m, i) => (
          <Reveal key={i} delay={i * 80}>
            <div style={{ background: 'var(--ivory)', borderRadius: 12, border: '1px solid var(--line-soft)', padding: 40, height: '100%', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 24, right: 28, fontFamily: 'var(--serif)', fontSize: 56, color: 'var(--sand)', lineHeight: 1, fontStyle: 'italic' }}>0{i+1}</div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{m.creds}</div>
              <h3 style={{ marginBottom: 12, fontSize: 28 }}>{m.name}</h3>
              <p style={{ fontSize: 13, color: 'var(--sage)', marginBottom: 18, fontStyle: 'italic' }}>{m.spec}</p>
              <p style={{ fontSize: 14, color: '#5a5a52', marginBottom: 24, flex: 1 }}>{m.bio}</p>
              <a className="link-arrow" onClick={() => onNavigate('team')} style={{ alignSelf: 'flex-start' }}>Read more <Icon name="arrow" size={14} /></a>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

/* WORKSHOPS */
const WorkshopsBlock = ({ onNavigate }) => (
  <section>
    <div className="container">
      <SectionHeader
        eyebrow="Workshops & Training"
        title="Workshops, training, and institutional support."
        lede="Psychoeducational workshops, skills-based learning, and institutional consultation for families, communities, and organizations."
      />
      <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="ws-grid">
        {[
          { title: 'Happily Ever After', sub: 'A Premarital Workshop', img: 'workshopA', kind: 'photo' },
          { title: 'Mental Health & Islam', sub: 'A Family Workshop', img: 'workshopB', kind: 'photo' },
          { title: 'My Parents Just Don\u2019t Get It', sub: 'A Workshop for Muslim Youth', img: 'workshopC', kind: 'photo' }
        ].map((w, i) => (
          <Reveal key={i} delay={i * 80}>
            {w.kind === 'photo' ? (
              <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden' }}>
                <Imagery variant={w.img} aspect="5/6" style={{ borderRadius: 0 }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(42,55,42,0.85) 100%)' }} />
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 28, color: 'var(--cream)' }}>
                  <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 10 }}>{w.sub}</div>
                  <h4 style={{ color: 'var(--cream)' }}>{w.title}</h4>
                </div>
              </div>
            ) : (
              <div style={{ aspectRatio: '5/6', borderRadius: 12, background: 'var(--forest-deep)', color: 'var(--cream)', padding: 36, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: -40, right: -40, fontFamily: 'var(--serif)', fontSize: 240, color: 'rgba(201,182,135,0.15)', lineHeight: 1, fontStyle: 'italic' }}>"</div>
                <div className="eyebrow" style={{ color: 'var(--gold-soft)', position: 'relative' }}>For Muslim Youth</div>
                <div style={{ position: 'relative' }}>
                  <h3 style={{ color: 'var(--cream)', fontSize: 'clamp(28px, 2.4vw, 36px)', marginBottom: 18, fontStyle: 'italic' }}>"My parents just don't get it."</h3>
                  <p style={{ fontSize: 14, color: 'rgba(251,247,239,0.75)', lineHeight: 1.6 }}>A peer-supported space for young Muslims navigating identity, family, and the bridge between worlds.</p>
                </div>
              </div>
            )}
          </Reveal>
        ))}
      </div>
      <Reveal>
        <div style={{ marginTop: 56, textAlign: 'center' }}>
          <button className="btn btn-secondary" onClick={() => onNavigate('workshops')}>
            All workshops & training <Icon name="arrow" size={16} />
          </button>
        </div>
      </Reveal>
    </div>
    <style>{`@media (max-width: 900px) { .ws-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

/* TESTIMONIALS */
const Testimonials = () => (
  <section style={{ background: 'var(--sand)' }}>
    <div className="container">
      <SectionHeader eyebrow="From those we serve" title="In their words." align="center" />
      <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="t-grid">
        {TESTIMONIALS.map((t, i) => (
          <Reveal key={i} delay={i * 100}>
            <div style={{ background: 'var(--cream)', padding: 40, borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column' }}>
              <Icon name="quote" size={28} stroke={1.2} />
              <p className="quote" style={{ margin: '20px 0 28px', flex: 1, fontSize: 'clamp(18px, 1.5vw, 22px)' }}>
                {t.quote}
              </p>
              <div style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 16 }}>
                <div style={{ fontSize: 14, color: 'var(--forest-deep)', fontWeight: 500 }}>{t.name}</div>
                <div style={{ fontSize: 12, color: 'var(--sage)', letterSpacing: '0.04em' }}>{t.loc}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .t-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

/* FAQ PREVIEW */
const FAQPreview = ({ onNavigate }) => (
  <section>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 80, alignItems: 'flex-start' }} className="faq-grid">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 22 }}><span className="dot" />Frequently asked</div>
          <h2 style={{ marginBottom: 28 }}>Questions answered with care.</h2>
          <p className="lede" style={{ marginBottom: 32 }}>
            A quiet space to find clarity before the conversation begins.
          </p>
          <button className="btn btn-secondary" onClick={() => onNavigate('faq')}>
            All questions <Icon name="arrow" size={16} />
          </button>
        </Reveal>
        <Reveal delay={150}>
          <Accordion items={FAQS.slice(0, 5)} defaultOpen={0} />
        </Reveal>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
  </section>
);

/* FINAL CTA */
const FinalCTA = ({ onNavigate }) => (
  <section style={{ background: 'var(--forest-deep)', color: 'var(--cream)' }}>
    <div className="container-narrow" style={{ textAlign: 'center' }}>
      <Reveal>
        <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 22, justifyContent: 'center' }}>
          <span className="dot" style={{ background: 'var(--gold-soft)' }} />Begin
        </div>
        <h2 style={{ color: 'var(--cream)', marginBottom: 28, fontSize: 'clamp(40px, 5vw, 72px)' }}>
          Begin with a <em style={{ fontStyle: 'italic', color: 'var(--gold-soft)' }}>conversation.</em>
        </h2>
        <p className="lede" style={{ color: 'rgba(251,247,239,0.78)', maxWidth: 560, margin: '0 auto 40px' }}>
          Taking the first step can feel difficult. Shifa Services offers a respectful, confidential starting point to help you understand what support may be right for you.
        </p>
        <button className="btn btn-primary" style={{ background: 'var(--cream)', color: 'var(--forest-deep)' }} onClick={() => onNavigate('contact')}>
          Request Consultation <Icon name="arrow" size={16} />
        </button>
      </Reveal>
    </div>
  </section>
);

/* CONTACT BLOCK (homepage) */
const ContactBlock = () => (
  <section style={{ background: 'var(--cream)', borderTop: '1px solid var(--line-soft)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }} className="cb-grid">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 22 }}><span className="dot" />Stay in touch</div>
          <h3 style={{ marginBottom: 24, fontSize: 'clamp(28px, 3vw, 42px)' }}>Speak with our team.</h3>
          <p style={{ color: '#5a5a52', marginBottom: 32, maxWidth: 440 }}>
            Reach out by phone, email, or the contact page. Your information is treated with care and confidentiality.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <a href="mailto:info@shifaservices.com" style={{ display: 'flex', gap: 14, alignItems: 'center', color: 'var(--forest-deep)', textDecoration: 'none' }}>
              <Icon name="mail" size={18} /> info@shifaservices.com
            </a>
            <a href="tel:4166484555" style={{ display: 'flex', gap: 14, alignItems: 'center', color: 'var(--forest-deep)', textDecoration: 'none' }}>
              <Icon name="phone" size={18} /> (416) 648-4555
            </a>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <Imagery variant="contact" aspect="4/3" style={{ borderRadius: 8 }} />
        </Reveal>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .cb-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
  </section>
);

Object.assign(window, { HomePage });