// 228 FILMS · Page Immobilier & Architecture
// Section rendue sur /#immobilier : kicker + h2 + lead + parcours 48-72h.

function ImmobilierParcours() {
  const tr = useTr();
  const { isMobile } = useViewport();
  const { setPage } = usePage();
  return (
    <section id="immobilier" style={{
      position: 'relative',
      paddingTop: isMobile ? 100 : 140, paddingBottom: isMobile ? 80 : 140,
      background: TOK.ivory,
    }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr', gap: isMobile ? 48 : 80, alignItems: 'start' }}>
          <div>
            <Reveal>
              <Kicker style={{ marginBottom: 22 }}>{tr({ fr: 'Immobilier & Architecture', en: 'Real estate & architecture' })}</Kicker>
            </Reveal>
            <Reveal delay={1}>
              <h2 style={h2Style}>
                {tr({
                  fr: 'Nous filmons vos lieux,\npour vous donner\nl\'image qu\'ils méritent.',
                  en: 'We film your places\nto give you the image\nthey deserve.',
                }).split('\n').map((line, i) => <div key={i}>{line}</div>)}
              </h2>
            </Reveal>
            <Reveal delay={2}>
              <p style={{ ...leadStyle, marginTop: 32, maxWidth: 540 }}>
                {tr({
                  fr: 'Nous prenons en charge le repérage, la captation terrain et drone, le montage et l\'étalonnage, pour vous donner des images prêtes à vendre, à louer ou à présenter.',
                  en: 'We take on scouting, ground and drone capture, edit and color, to give you images ready to sell, to rent or to present.',
                })}
              </p>
              <p style={{ ...leadStyle, marginTop: 18, maxWidth: 540, color: TOK.inkMed }}>
                {tr({
                  fr: 'Pour les agents immobiliers, les architectes et les promoteurs qui veulent une image soignée de leurs lieux, sans gérer la production.',
                  en: 'For real estate agents, architects and developers who want a polished image of their places, without managing the production.',
                })}
              </p>
            </Reveal>
            <Reveal delay={3}>
              <div style={{ marginTop: 36, display: 'flex', gap: 18, flexWrap: 'wrap' }}>
                <CTA kind="primary" onClick={() => setPage('contact')}>
                  {tr({ fr: 'Demander une soumission', en: 'Request a quote' })}
                </CTA>
              </div>
            </Reveal>
          </div>

          {/* Diagramme parcours · 4 étapes vertical */}
          <Reveal delay={2}>
            <ParcoursDiagram />
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

function ParcoursDiagram() {
  const tr = useTr();
  const steps = [
    { n: '01', label: { fr: 'Cadrage',     en: 'Briefing'    }, body: { fr: 'Cinq questions par courriel.',       en: 'Five questions by email.' } },
    { n: '02', label: { fr: 'Repérage',    en: 'Scouting'    }, body: { fr: 'Plan de tournage validé ensemble.',  en: 'Shoot plan validated together.' } },
    { n: '03', label: { fr: 'Captation',   en: 'Capture'     }, body: { fr: 'Terrain + drone sur place.',         en: 'Ground + drone on site.' } },
    { n: '04', label: { fr: 'Livraison',   en: 'Delivery'    }, body: { fr: 'Montage et étalonnage, 48–72 h.',    en: 'Edit and color, 48–72 h.' } },
  ];
  return (
    <div style={{
      background: TOK.paper, border: `1px solid ${TOK.ink10}`,
      padding: '40px 36px 36px',
      position: 'relative',
    }}>
      <div style={{ position: 'absolute', top: 0, right: 0, width: 80, height: 80, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: 0, right: 0, width: 14, height: 1, background: TOK.bronze }} />
        <div style={{ position: 'absolute', top: 0, right: 0, width: 1, height: 14, background: TOK.bronze }} />
      </div>

      <Kicker style={{ marginBottom: 24 }}>{tr({ fr: 'Schéma du tournage', en: 'Shoot diagram' })}</Kicker>

      <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
        {steps.map((s, i) => (
          <li key={i} style={{
            display: 'grid', gridTemplateColumns: '46px 1fr', gap: 16, alignItems: 'flex-start',
          }}>
            <div style={{
              fontFamily: TOK.mono, fontSize: 13, fontWeight: 500,
              letterSpacing: '.16em', color: TOK.bronze, paddingTop: 2,
            }}>{s.n}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{
                fontFamily: TOK.sans, fontWeight: 500, fontSize: 17,
                color: TOK.ink, letterSpacing: '-0.012em',
              }}>{tr(s.label)}</span>
              <span style={{
                fontFamily: TOK.sans, fontSize: 13.5, lineHeight: 1.55, color: TOK.inkMed,
              }}>{tr(s.body)}</span>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}

// ─── Shared style helpers ───────────────────────────────────────
const h2Style = {
  margin: 0, fontFamily: TOK.sans, fontWeight: 500,
  fontSize: 'clamp(40px, 5vw, 68px)',
  lineHeight: 1.04, letterSpacing: '-0.025em',
  color: TOK.ink, textWrap: 'balance',
};
const leadStyle = {
  margin: 0, fontFamily: TOK.sans, fontSize: 16, lineHeight: 1.6,
  color: TOK.ink70, maxWidth: 460,
};
const metaCapStyle = {
  fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.18em',
  color: TOK.ink55, textTransform: 'uppercase',
};

Object.assign(window, { ImmobilierParcours, h2Style, leadStyle, metaCapStyle });