// § 07 — Crowdfunding immobilier (Dossier Industriel)
// First UN TOIT house — real-estate crowdfunding pitch.
// Tickets from €1000. Real photos + technical drawings as evidence.

function Crowdfunding() {
  const { INK, INK_SOFT, INK_FAINT, PAPER, PAPER_DEEP } = window.WF;
  const ACCENT = '#d49328';
  const mono = { fontFamily: 'ui-monospace, "SF Mono", monospace', fontSize: 11, color: INK_SOFT, letterSpacing: '.04em' };

  // ── Image tile (dashed box + image + label chip + caption strip) ──
  const Tile = ({ src, alt, label, caption, height, gridColumn, className }) => (
    <div className={className} style={{
      position: 'relative',
      gridColumn,
      border: `1.8px dashed ${INK}`,
      padding: 0,
      overflow: 'hidden',
      background: PAPER_DEEP,
    }}>
      <div style={{ position: 'relative', width: '100%', height }}>
        <img
          src={src}
          alt={alt}
          style={{
            width: '100%',
            height,
            objectFit: 'cover',
            display: 'block',
            background: PAPER_DEEP,
          }}
          onError={(e) => { e.target.style.display = 'none'; }}
        />
        {/* label chip top-left */}
        <span style={{
          position: 'absolute', top: 10, left: 10,
          display: 'inline-block', padding: '2px 8px',
          background: 'rgba(246,243,236,.92)',
          border: `1.2px solid ${INK}`,
          color: INK,
          fontFamily: 'ui-monospace, "SF Mono", monospace',
          fontSize: 10,
          letterSpacing: '.1em',
          textTransform: 'uppercase',
        }}>{label}</span>
        {/* caption strip bottom */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          background: 'rgba(13,12,10,.55)',
          color: '#f5f1e6',
          padding: '6px 10px',
          fontFamily: 'ui-monospace, "SF Mono", monospace',
          fontSize: 10,
          letterSpacing: '.04em',
        }}>{caption}</div>
      </div>
    </div>
  );

  // KPI cell for the right-column Box
  const Kpi = ({ l, v, n }) => (
    <div style={{ borderTop: `1px solid ${INK}`, paddingTop: 10 }}>
      <div style={{ ...mono, fontSize: 9 }}>{l}</div>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 38, color: ACCENT, lineHeight: 1, marginTop: 4 }}>{v}</div>
      <div style={{ ...mono, fontSize: 10, marginTop: 4 }}>{n}</div>
    </div>
  );

  // Progress bar — 0% filled
  const progress = 0;

  return (
    <section id="crowdfunding" className="s-section" style={{ marginBottom: 90, position: 'relative' }}>
      {/* ── Header ── */}
      <div className="s-section-title" style={{ display: 'flex', alignItems: 'baseline', gap: 18, borderBottom: `1px solid ${INK}`, paddingBottom: 12, marginBottom: 28 }}>
        <span style={{ ...mono, color: ACCENT, fontSize: 13 }}>§ 07 · Objectif</span>
        <span className="s-section-display" style={{ fontFamily: "'Caveat', cursive", fontSize: 38, fontWeight: 700, color: INK, lineHeight: 1 }}>Crowdfunding immobilier</span>
        <span className="s-section-title-sub" style={{ marginLeft: 'auto', ...mono, fontSize: 11 }}>● première opération · ouverte aux investisseurs</span>
      </div>

      {/* ── Intro 2-col ── */}
      <div className="s-grid-2" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36, marginBottom: 36 }}>
        {/* Left: headline + body + CTA */}
        <div>
          <HW size={40} style={{ marginBottom: 16, maxWidth: 520 }}>Investissez dans la première maison UN TOIT.</HW>
          <p style={{
            fontFamily: "'Patrick Hand', cursive",
            fontSize: 16,
            color: INK_SOFT,
            maxWidth: 520,
            lineHeight: 1.5,
            margin: 0,
          }}>
            Nous lançons une opération de financement participatif pour produire et déployer notre première maison modulaire pliable. Vous pouvez participer dès <strong style={{ color: INK }}>1 000 €</strong> et devenir copropriétaire de la première unité industrielle UN TOIT.
          </p>

          <div style={{
            marginTop: 22,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            ...mono,
            color: ACCENT,
            fontSize: 11,
            border: `1.2px solid ${ACCENT}`,
            padding: '4px 10px',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: ACCENT, display: 'inline-block' }}></span>
            CAGNOTTE · OUVERTE
          </div>

          <div style={{ marginTop: 22, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <SketchBtn size="lg" fill={ACCENT} color="#1d1b18" style={{ background: ACCENT, borderColor: ACCENT }}>
              Investir à partir de 1 000 € →
            </SketchBtn>
            <SketchBtn size="lg">Lire la note d'opération (pdf)</SketchBtn>
          </div>

          <div style={{ marginTop: 22, ...mono, fontSize: 10, color: INK_FAINT }}>
            REF · CF/2026/01 · UN TOIT OP-01
          </div>
        </div>

        {/* Right: KPI Box */}
        <Box padding={18} label="OPÉRATION 01">
          <div style={{ ...mono, display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <span>Synthèse · ticket · objectif</span>
            <span style={{ color: ACCENT }}>● live</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Kpi l="TICKET MIN" v="1 000 €" n="par investisseur" />
            <Kpi l="OBJECTIF" v="95 500 €" n="74 m² + terrain" />
            <Kpi l="INVESTISSEURS" v="0 / 95" n="places ouvertes" />
            <Kpi l="HORIZON" v="24 mois" n="construction + déploiement" />
          </div>

          {/* progress bar */}
          <div style={{ marginTop: 22 }}>
            <div style={{
              position: 'relative',
              height: 18,
              border: `1.4px solid ${INK}`,
              background: PAPER_DEEP,
              overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute',
                top: 0, left: 0, bottom: 0,
                width: `${progress}%`,
                background: ACCENT,
              }}></div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, ...mono, fontSize: 10 }}>
              <span>0 / 95 500 €</span>
              <span style={{ color: ACCENT }}>{progress}%</span>
            </div>
          </div>
        </Box>
      </div>

      {/* ── Maison gallery — visual proof ── */}
      <div style={{ marginBottom: 16, display: 'flex', alignItems: 'baseline', gap: 12 }}>
        <Tag color={ACCENT} style={{ color: ACCENT, borderColor: ACCENT }}>PREUVES · UNITÉ 01</Tag>
        <span style={{ ...mono, fontSize: 10 }}>5 vues · plans + photos · maison réelle, pas un rendu</span>
      </div>
      <div className="s-grid-12" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(12, 1fr)',
        gap: 16,
        marginBottom: 40,
      }}>
        <Tile
          src="media/house/planche.png"
          alt="Planche de vues du projet pilote — façades et perspectives"
          label="RÉFÉRENCE · PROJET PILOTE"
          caption="8 vues · maison modulaire bois & acier"
          height={360}
          gridColumn="span 12"
          className="s-tile"
        />
        <Tile
          src="media/house/drone.png"
          alt="Photo drone du site d'implantation du projet pilote"
          label="DRONE · SITE PILOTE"
          caption="Implantation réelle · contexte résidentiel"
          height={380}
          gridColumn="span 8"
          className="s-tile"
        />
        <Tile
          src="media/house/3d-interior.png"
          alt="Agencement 3D intérieur — 37 m²"
          label="AGENCEMENT 3D"
          caption="37 m² · chambre · SDB · cuisine · séjour"
          height={380}
          gridColumn="span 4"
          className="s-tile"
        />
        <Tile
          src="media/house/interior-kitchen.png"
          alt="Photo intérieur du module pilote — cuisine et séjour"
          label="INTÉRIEUR · CUISINE"
          caption="Module livré · cuisine + séjour"
          height={340}
          gridColumn="span 6"
          className="s-tile"
        />
        <Tile
          src="media/house/interior-bathroom.jpg"
          alt="Photo intérieur du module pilote — salle de bain"
          label="INTÉRIEUR · SDB"
          caption="Salle de bain · module pilote"
          height={340}
          gridColumn="span 6"
          className="s-tile"
        />
      </div>

      {/* ── 3-col pitch : why now ── */}
      <div className="s-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 40 }}>
        {[
          ['T01', 'Premier projet, vraies preuves.', "Vous investissez sur du concret : la maison ci-dessus n'est pas un rendu, c'est l'unité 01."],
          ['T02', 'Capital fractionné dès 1 000 €.', "Ticket d'entrée volontairement bas pour ouvrir l'opération aux particuliers, pas qu'aux fonds."],
          ['T03', 'Rendement adossé au modèle industriel.', "Coûts maîtrisés par l'industrialisation : marge plus prévisible qu'une promotion classique."],
        ].map(([n, t, d]) => (
          <Box key={n} padding={18}>
            <div style={{ ...mono, color: ACCENT }}>{n}</div>
            <div style={{ fontFamily: "'Caveat', cursive", fontSize: 30, color: INK, lineHeight: 1.05, marginTop: 6, fontWeight: 700 }}>{t}</div>
            <div style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 14, color: INK_SOFT, marginTop: 10, lineHeight: 1.5 }}>{d}</div>
          </Box>
        ))}
      </div>

      {/* ── Bottom strip · key terms ── */}
      <div className="s-bottom-terms" style={{
        borderTop: `1.4px solid ${INK}`,
        borderBottom: `1.4px solid ${INK}`,
        padding: '14px 18px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 12,
        flexWrap: 'wrap',
      }}>
        {[
          ['ÉLIGIBILITÉ', 'résident UE'],
          ['MONTANT MIN', '1 000 €'],
          ['MONTANT MAX', '50 000 € / investisseur'],
          ['DURÉE', '24 mois'],
          ['STATUT', 'à confirmer (CIP)'],
        ].map(([l, v], i, arr) => (
          <React.Fragment key={l}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ ...mono, fontSize: 10 }}>{l}</span>
              <span style={{ fontFamily: "'Caveat', cursive", fontSize: 22, color: INK, lineHeight: 1 }}>{v}</span>
            </div>
            {i < arr.length - 1 && (
              <span className="s-bottom-terms-sep" style={{ color: INK_FAINT, fontSize: 14, fontFamily: 'ui-monospace, "SF Mono", monospace' }}>·</span>
            )}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

window.Crowdfunding = Crowdfunding;