const { useState, useEffect, useRef } = React;

const PHONE = "0786356139";
const PHONE_DISPLAY = "07 86 35 61 39";
const PHONE_INTL = "+33786356139";
const WHATSAPP = `https://wa.me/33786356139?text=${encodeURIComponent("Bonjour Stive, je viens de scanner ta carte et j'aimerais échanger sur un projet de financement.")}`;
const LINKEDIN = "https://www.linkedin.com/in/stivecometto-courtier/";
const EMAIL = "stive.cometto@courtage.fr"; // placeholder

// vCard generated on the fly
const vcard = `BEGIN:VCARD
VERSION:3.0
N:Cometto;Stive;;;
FN:Stive Cometto
TITLE:Courtier en crédit — Pro & Immobilier
TEL;TYPE=CELL:${PHONE_INTL}
EMAIL:${EMAIL}
URL:${LINKEDIN}
ADR;TYPE=WORK:;;;;;;Var / Alpes-Maritimes;France
NOTE:Crédit immobilier, professionnel, SCI, locatif, rachat de prêt.
END:VCARD`;
const vcardHref = "data:text/vcard;charset=utf-8," + encodeURIComponent(vcard);

// ── Inline icons (stroke = currentColor) ─────────────────────────────
const Ico = {
  phone: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></svg>,
  wa: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M17.5 14.4c-.3-.15-1.77-.87-2.05-.97-.27-.1-.47-.15-.67.15s-.77.97-.94 1.17c-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.1 3.21 5.08 4.5.71.31 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35zM12.05 21.5h-.04a9.45 9.45 0 0 1-4.81-1.32l-.34-.2-3.57.94.95-3.48-.22-.36a9.43 9.43 0 0 1-1.45-5.04c0-5.22 4.25-9.46 9.48-9.46 2.53 0 4.91.99 6.7 2.78a9.4 9.4 0 0 1 2.78 6.69c0 5.22-4.25 9.45-9.48 9.45zm8.06-17.5A11.4 11.4 0 0 0 12.05.5C5.74.5.6 5.63.6 11.93c0 2.02.53 3.99 1.53 5.73L.5 23.5l6-1.57a11.4 11.4 0 0 0 5.45 1.39h.01c6.31 0 11.45-5.13 11.45-11.43 0-3.05-1.19-5.93-3.36-8.09z"/></svg>,
  ln: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45C23.21 24 24 23.23 24 22.27V1.72C24 .77 23.21 0 22.22 0z"/></svg>,
  card: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="9" cy="12" r="2.2"/><path d="M5 17c.7-1.6 2.2-2.6 4-2.6s3.3 1 4 2.6"/><path d="M15 10h4M15 13h3"/></svg>,
  share: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v13"/><path d="m7 8 5-5 5 5"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>,
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>,
  chev: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m6 9 6 6 6-6"/></svg>,
  euro: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M18 7a7 7 0 0 0-11.5 4M18 17A7 7 0 0 1 6.5 13"/><path d="M3 10h9M3 14h9"/></svg>,
  shield: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3 4 6v6c0 5 3.4 8.5 8 9 4.6-.5 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>,
  pin: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>,
  spark: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.5 5.5l2.8 2.8M15.7 15.7l2.8 2.8M5.5 18.5l2.8-2.8M15.7 8.3l2.8-2.8"/></svg>,
};

const services = [
  { t: "Crédit immobilier", d: "Résidence principale, secondaire" },
  { t: "Investissement locatif", d: "Optimisation patrimoniale" },
  { t: "Crédit professionnel", d: "Trésorerie, équipement, BFR" },
  { t: "SCI / Sociétés", d: "Montages dédiés" },
  { t: "Murs commerciaux", d: "Locaux, pas-de-porte" },
  { t: "Renégociation", d: "Baisser tes mensualités" },
  { t: "Assurance emprunteur", d: "Économies sur la durée" },
];

// ── Section: Hero ────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero">
      <div className="hero-grain" aria-hidden="true"></div>
      <div className="hero-inner">
        <div className="brand-row">
          <div className="monogram">SC</div>
          <div className="brand-text">
            <div className="brand-name">Stive Cometto</div>
            <div className="brand-sub">Courtier en crédit · Var / Alpes-Maritimes</div>
          </div>
        </div>

        <div className="portrait-wrap">
          <div className="portrait-ring" aria-hidden="true"></div>
          <img className="portrait" src="assets/stive.jpg" alt="Stive Cometto" />
          <div className="portrait-badge">
            <Ico.shield width="14" height="14"/>
            <span>ORIAS</span>
          </div>
        </div>

        <h1 className="hero-title">
          Tes projets méritent <em>un vrai défenseur</em> face aux banques.
        </h1>

        <p className="hero-lede">
          Pro, immobilier, SCI, locatif. Je négocie, je structure,
          je décroche les meilleures conditions — pour toi
          ou les clients que tu m'envoies.
        </p>

        <div className="hero-cta">
          <a className="btn btn-primary" href={`tel:${PHONE_INTL}`}>
            <Ico.phone width="18" height="18"/>
            <span>Appeler maintenant</span>
            <span className="btn-sub">{PHONE_DISPLAY}</span>
          </a>
          <a className="btn btn-secondary" href={vcardHref} download="Stive-Cometto.vcf">
            <Ico.card width="18" height="18"/>
            <span>Enregistrer le contact</span>
          </a>
        </div>

        <div className="hero-quick">
          <a className="quick" href={WHATSAPP} target="_blank" rel="noreferrer">
            <Ico.wa width="16" height="16"/> WhatsApp
          </a>
          <span className="quick-sep">·</span>
          <a className="quick" href={LINKEDIN} target="_blank" rel="noreferrer">
            <Ico.ln width="14" height="14"/> LinkedIn
          </a>
          <span className="quick-sep">·</span>
          <button className="quick" onClick={() => {
            if (navigator.share) navigator.share({ title: "Stive Cometto", url: location.href });
          }}>
            <Ico.share width="14" height="14"/> Partager
          </button>
        </div>
      </div>
    </section>
  );
}

// ── Section: Apporteurs ─────────────────────────────────────────────
function Apporteurs() {
  return (
    <section className="apport">
      <div className="apport-tag">
        <Ico.spark width="12" height="12"/> Programme apporteurs d'affaires
      </div>
      <h2 className="apport-title">
        Tu connais quelqu'un qui veut emprunter ? <em>On s'occupe du reste.</em>
      </h2>
      <p className="apport-lede">
        Plutôt que de laisser tes contacts seuls face à leur banquier,
        envoie-les moi. Je les accompagne de A à Z. Toi, tu touches une commission.
      </p>

      <div className="reward">
        <div className="reward-amount">
          <span className="reward-currency">€</span>
          <span className="reward-num">1 000</span>
        </div>
        <div className="reward-text">
          <div className="reward-label">par crédit immobilier signé</div>
          <div className="reward-fine">versés dès le déblocage des fonds</div>
        </div>
      </div>

      <ul className="apport-steps">
        <li>
          <div className="step-num">01</div>
          <div className="step-body">
            <div className="step-t">Tu m'envoies le contact</div>
            <div className="step-d">Un message, un appel, un transfert. C'est tout.</div>
          </div>
        </li>
        <li>
          <div className="step-num">02</div>
          <div className="step-body">
            <div className="step-t">Je prends le relais</div>
            <div className="step-d">Étude, montage, négociation bancaire — sans toi.</div>
          </div>
        </li>
        <li>
          <div className="step-num">03</div>
          <div className="step-body">
            <div className="step-t">Le crédit est signé</div>
            <div className="step-d">Ton client est financé, tu reçois ta commission.</div>
          </div>
        </li>
      </ul>

      <a className="btn btn-ghost" href={WHATSAPP} target="_blank" rel="noreferrer">
        <Ico.wa width="16" height="16"/>
        <span>Devenir apporteur</span>
        <Ico.arrow width="16" height="16"/>
      </a>
    </section>
  );
}

// ── Section: Services ───────────────────────────────────────────────
function Services() {
  return (
    <section className="services">
      <div className="sec-eyebrow">Ce que je négocie</div>
      <h2 className="sec-title">Tous types de financement,<br/><em>un seul interlocuteur.</em></h2>
      <ul className="serv-list">
        {services.map((s, i) => (
          <li key={i} className="serv-item">
            <div className="serv-bullet"><Ico.check width="14" height="14"/></div>
            <div>
              <div className="serv-t">{s.t}</div>
              <div className="serv-d">{s.d}</div>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ── Section: Method / Reassurance ──────────────────────────────────
function Method() {
  const items = [
    { ico: <Ico.euro width="18" height="18"/>, t: "Tous les échanges sont gratuits", d: "Success fee uniquement : tu ne paies qu'en cas de signature." },
    { ico: <Ico.shield width="18" height="18"/>, t: "Plus de 25 banques", d: "Je mets vraiment les offres en concurrence." },
    { ico: <Ico.spark width="18" height="18"/>, t: "Réponse sous 48h", d: "Tu sais vite si ton projet est finançable." },
    { ico: <Ico.pin width="18" height="18"/>, t: "Var & Alpes-Maritimes", d: "Sur place quand il faut, à distance quand ça suffit." },
  ];
  return (
    <section className="method">
      <h2 className="sec-title light">Pourquoi passer par moi.</h2>
      <div className="method-grid">
        {items.map((x, i) => (
          <div key={i} className="method-card">
            <div className="method-ico">{x.ico}</div>
            <div className="method-t">{x.t}</div>
            <div className="method-d">{x.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Section: Final CTA ──────────────────────────────────────────────
function FinalCTA() {
  return (
    <section className="final">
      <div className="final-eyebrow">Tous les échanges sont gratuits — success fee uniquement.</div>
      <h2 className="final-title">On parle de ton projet ?</h2>
      <a className="btn btn-primary big" href={`tel:${PHONE_INTL}`}>
        <Ico.phone width="18" height="18"/>
        <span>{PHONE_DISPLAY}</span>
      </a>
      <a className="btn btn-secondary" href={WHATSAPP} target="_blank" rel="noreferrer">
        <Ico.wa width="18" height="18"/>
        <span>Écrire sur WhatsApp</span>
      </a>
    </section>
  );
}

// ── Sticky bottom bar (mobile) ─────────────────────────────────────
function StickyBar() {
  return (
    <div className="sticky">
      <a className="sticky-btn primary" href={`tel:${PHONE_INTL}`}>
        <Ico.phone width="16" height="16"/> Appeler
      </a>
      <a className="sticky-btn" href={WHATSAPP} target="_blank" rel="noreferrer">
        <Ico.wa width="16" height="16"/> WhatsApp
      </a>
      <a className="sticky-btn" href={vcardHref} download="Stive-Cometto.vcf">
        <Ico.card width="16" height="16"/> Contact
      </a>
    </div>
  );
}

// ── Footer ─────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="foot">
      <div className="foot-mono">SC · COURTAGE</div>
      <div className="foot-line">Stive Cometto · Courtier en crédit IOBSP</div>
      <div className="foot-mini">Var · Alpes-Maritimes · France</div>
      <div className="foot-legal">Mentions ORIAS disponibles sur demande. L'emprunt coûte de l'argent, vérifiez vos capacités de remboursement avant de vous engager.</div>
    </footer>
  );
}

function Landing() {
  const Divider = () => (
    <div className="divider" aria-hidden="true">
      <span className="divider-mark"></span>
    </div>
  );
  return (
    <div className="page">
      <Hero/>
      <Divider/>
      <Apporteurs/>
      <Divider/>
      <Services/>
      <Divider/>
      <Method/>
      <Divider/>
      <FinalCTA/>
      <Footer/>
      <StickyBar/>
    </div>
  );
}

window.Landing = Landing;
