const trustItems = [
  ["Conversations qualifiées", "Des échanges utiles avec les bons décideurs."],
  ["Méthode & rigueur", "Un processus structuré pour des résultats mesurables."],
  ["Croissance durable", "Des opportunités réelles qui créent de la valeur."]
];

const stats = [
  ["+150", "entreprises accompagnées"],
  ["+12K", "conversations qualifiées"],
  ["+35%", "de taux de conversion moyen"]
];

const method = [
  ["01", "Comprendre", "Clarifier votre marché, vos cibles et les conversations à ouvrir en priorité."],
  ["02", "Structurer", "Organiser l'approche commerciale, les messages, les séquences et le suivi CRM."],
  ["03", "Engager", "Créer des échanges qualifiés avec les décideurs, sans pression inutile."],
  ["04", "Développer", "Transformer les retours terrain en pipeline plus lisible et plus durable."]
];

const services = [
  ["Ciblage & segmentation", "Identifier les comptes prioritaires, les décideurs utiles et les signaux qui rendent l'approche pertinente.", "Livrables : ICP, segments, scoring, liste priorisée."],
  ["Conversations qualifiées", "Ouvrir des échanges commerciaux sobres, clairs et respectueux de votre niveau de marque.", "Livrables : scripts, séquences, qualification, rendez-vous."],
  ["Structuration commerciale", "Mettre en place les messages, les vues CRM et les indicateurs qui donnent de la lisibilité.", "Livrables : pipeline, champs CRM, rituels de suivi."],
  ["Pilotage & apprentissage", "Transformer les retours terrain en décisions : objections, angles, opportunités, priorités.", "Livrables : synthèse terrain, recommandations, prochaines actions."]
];

const expertise = [
  ["Santé", "Une approche rassurante pour des environnements où la confiance se construit avant la conversion."],
  ["Medtech", "Des conversations précises avec des décideurs exigeants et des cycles d'adoption longs."],
  ["SaaS & ERP", "Une structuration claire des comptes, du pipeline et des opportunités commerciales."],
  ["Services premium", "Un développement commercial sobre, humain et aligné avec une image haut de gamme."]
];

const proofCases = [
  ["Medtech B2B", "Base commerciale clarifiée, décideurs priorisés, premiers rendez-vous qualifiés sur un segment santé privé.", "Résultat : pipeline plus lisible en 3 semaines."],
  ["Service premium", "Refonte des angles d'approche et création d'une séquence de conversation moins agressive.", "Résultat : meilleurs retours, moins d'objections de confiance."],
  ["SaaS métier", "Structuration CRM, qualification des comptes et remontée des objections récurrentes.", "Résultat : pilotage commercial plus fiable."]
];

const reasons = [
  ["Calme", "Une prospection qui protège l'image de marque et respecte le rythme des décideurs."],
  ["Précision", "Des comptes ciblés, des messages clairs, des indicateurs utiles."],
  ["Humain", "La technologie soutient la relation, elle ne remplace pas la qualité de l'échange."],
  ["Structure", "Chaque action s'inscrit dans une trajectoire commerciale lisible."]
];

const resources = [
  ["Guide", "Comment reconnaître une conversation vraiment qualifiée ?", "Les critères qui distinguent un échange poli d'une vraie opportunité commerciale."],
  ["Méthode", "Les 4 signaux qui indiquent qu'un compte mérite une priorité commerciale.", "Une grille simple pour éviter de disperser l'effort de prospection."],
  ["Analyse", "Pourquoi les offres santé et medtech exigent une prospection plus patiente.", "Confiance, timing, interlocuteurs multiples : les points à respecter."],
  ["CRM", "Transformer les retours terrain en décisions commerciales concrètes.", "Comment passer d'appels isolés à une lecture de marché exploitable."]
];

const diagnosticHref = "mailto:contact@votre-domaine.fr?subject=Diagnostic%20commercial%20HELM%20-%2030%20min";

function HelmLogo({ hero = false }) {
  return (
    <a href="/" className={`helm-logo ${hero ? "helm-logo-hero" : ""}`} aria-label="HELM">
      <img src={hero ? "assets/helm-logo.png?v=hd-20260513" : "assets/helm-icon.png?v=hd-20260513"} alt="HELM - Votre vision, notre direction." />
    </a>
  );
}

function Header() {
  return (
    <header className="site-header">
      <HelmLogo />
      <nav className="site-nav" aria-label="Navigation principale">
        <a href="/approche.html">Approche</a>
        <a href="/services.html">Services</a>
        <a href="/a-propos.html">À propos</a>
        <a href="/ressources.html">Ressources</a>
      </nav>
      <a className="header-cta" href={diagnosticHref}>Diagnostic 30 min</a>
    </header>
  );
}

function CompassVisual() {
  return (
    <div className="compass-wrap" aria-hidden="true">
      <img src="assets/helm-icon.png?v=hd-20260513" alt="" />
    </div>
  );
}

function WaveField() {
  const lines = Array.from({ length: 20 }, (_, index) => index);
  return (
    <svg className="wave-field" viewBox="0 0 960 320" aria-hidden="true">
      {lines.map((line) => (
        <path
          key={line}
          d={`M-40 ${250 + line * 4} C 170 ${210 - line * 3}, 310 ${332 - line * 2}, 500 ${240 - line * 5} S 780 ${110 + line * 5}, 1010 ${150 + line * 2}`}
          fill="none"
          stroke="#0F766E"
          strokeWidth="0.85"
          opacity={0.1 + line * 0.018}
        />
      ))}
    </svg>
  );
}

function Hero() {
  return (
    <section id="top" className="hero-section">
      <WaveField />
      <div className="hero-brand">
        <HelmLogo hero />
      </div>
      <div className="hero-inner">
        <div className="hero-copy">
          <h1>
            Piloter le cap.
            <span>Créer des opportunités.</span>
          </h1>
          <p>
            HELM aide les entreprises santé, medtech et B2B premium à générer des conversations qualifiées avec leurs décideurs.
          </p>
          <div className="hero-actions">
            <a className="primary-btn" href={diagnosticHref}>Planifier un diagnostic</a>
            <a className="secondary-btn" href="/approche.html">Découvrir notre approche</a>
          </div>
        </div>
        <CompassVisual />
      </div>
    </section>
  );
}

function TrustBand() {
  return (
    <section id="approche" className="trust-band">
      {trustItems.map(([title, text]) => (
        <article key={title}>
          <div className="trust-icon">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <circle cx="12" cy="8" r="3.2" />
              <path d="M5.5 19c1.2-3.3 3.4-5 6.5-5s5.3 1.7 6.5 5" />
            </svg>
          </div>
          <div>
            <h2>{title}</h2>
            <p>{text}</p>
          </div>
        </article>
      ))}
    </section>
  );
}

function StatsBand() {
  return (
    <section className="stats-band">
      {stats.map(([value, label]) => (
        <article key={label}>
          <strong>{value}</strong>
          <span>{label}</span>
        </article>
      ))}
    </section>
  );
}

function SectionHeading({ eyebrow, title, text }) {
  return (
    <div className="section-heading">
      <span>{eyebrow}</span>
      <h2>{title}</h2>
      {text && <p>{text}</p>}
    </div>
  );
}

function MethodSection({ compact = false }) {
  return (
    <section className={`content-section ${compact ? "compact-section" : ""}`}>
      <SectionHeading
        eyebrow="Méthode"
        title="Une approche claire et structurée."
        text="HELM donne une direction commerciale lisible : comprendre, structurer, engager, puis développer avec constance."
      />
      <div className="method-grid">
        {method.map(([number, title, text]) => (
          <article key={title}>
            <span>{number}</span>
            <h3>{title}</h3>
            <p>{text}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function ServicesSection({ compact = false }) {
  return (
    <section className={`content-section ${compact ? "compact-section" : ""}`}>
      <SectionHeading
        eyebrow="Services"
        title="Ce que HELM fait concrètement."
        text="Un accompagnement commercial pensé pour passer d'une vision stratégique à des conversations qualifiées, suivies et exploitables."
      />
      <div className="service-list">
        {services.map(([title, text, deliverable]) => (
          <article key={title}>
            <h2>{title}</h2>
            <p>{text}</p>
            <small>{deliverable}</small>
          </article>
        ))}
      </div>
    </section>
  );
}

function ExpertiseSection({ compact = false }) {
  return (
    <section className={`content-section expertise-section ${compact ? "compact-section" : ""}`}>
      <SectionHeading
        eyebrow="Expertise"
        title="Santé, medtech et services B2B à forte valeur."
        text="La marque reste ouverte aux univers SaaS, ERP et conseil, tout en conservant un langage de confiance, de précision et d'accompagnement."
      />
      <div className="expertise-grid">
        {expertise.map(([title, text]) => (
          <article key={title}>
            <h3>{title}</h3>
            <p>{text}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function ProofSection() {
  return (
    <section className="content-section proof-section">
      <SectionHeading
        eyebrow="Preuve"
        title="Des cas d'usage concrets, sans bruit inutile."
        text="Les exemples restent anonymisés, mais ils montrent le type de transformation recherchée : plus de clarté, plus de conversations utiles, moins de dispersion commerciale."
      />
      <div className="proof-grid">
        {proofCases.map(([type, text, result]) => (
          <article key={type}>
            <span>{type}</span>
            <h3>{text}</h3>
            <p>{result}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function WhySection() {
  return (
    <section className="content-section why-section">
      <SectionHeading
        eyebrow="Pourquoi HELM"
        title="Une manière plus calme de développer le commercial."
        text="HELM privilégie la qualité de la trajectoire : des actions simples, bien suivies, cohérentes avec votre image et votre niveau d'exigence."
      />
      <div className="why-grid">
        {reasons.map(([title, text]) => (
          <article key={title}>
            <h3>{title}</h3>
            <p>{text}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function HumanSection() {
  return (
    <section id="apropos" className="human-section">
      <div className="human-image">
        <img src="assets/testimonial-cafe-meeting.jpg" alt="Échange professionnel dans un espace lumineux" />
      </div>
      <article>
        <span>Accompagnement humain</span>
        <h2>Une relation commerciale calme, précise et fiable.</h2>
        <p>HELM ne cherche pas à faire plus de bruit. L'objectif est de créer les bonnes conversations, avec les bons interlocuteurs, au bon rythme.</p>
      </article>
    </section>
  );
}

function JourneySection() {
  const steps = [
    ["Terrain commercial", "Un parcours construit au contact direct des décideurs, avec une attention particulière portée à la qualité des échanges, au timing et à la confiance."],
    ["Environnements exigeants", "Une culture des cycles B2B où chaque conversation doit être utile : santé, medtech, services premium, SaaS, ERP et conseil."],
    ["Méthode structurée", "Une approche qui relie ciblage, messages, qualification, CRM et suivi pour transformer la prospection en trajectoire commerciale lisible."]
  ];

  return (
    <section className="content-section journey-section">
      <SectionHeading
        eyebrow="Parcours"
        title="Une expérience commerciale façonnée par le terrain."
        text="Avant HELM, il y a une conviction simple : le développement commercial fonctionne mieux lorsqu'il repose sur une vraie compréhension du marché, des interlocuteurs et du niveau d'exigence de l'offre."
      />
      <div className="journey-panel">
        <article className="journey-intro">
          <span>Ce qui guide l'approche</span>
          <h2>Créer des conversations utiles, pas du bruit commercial.</h2>
          <p>
            Le parcours derrière HELM s'est construit autour d'un sujet central : aider des entreprises sérieuses à ouvrir les bons échanges, avec les bons décideurs, sans abîmer leur image. L'objectif n'est pas d'aller plus vite à tout prix, mais d'avancer avec précision.
          </p>
        </article>
        <div className="journey-list">
          {steps.map(([title, text]) => (
            <article key={title}>
              <h3>{title}</h3>
              <p>{text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section id="contact" className="final-cta">
      <span>Diagnostic commercial</span>
      <h2>Donnons une direction claire à votre développement.</h2>
      <p>En 30 minutes, nous clarifions votre cible, votre enjeu commercial et les premières actions utiles.</p>
      <a className="primary-btn" href={diagnosticHref}>Planifier un diagnostic</a>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <img src="assets/helm-logo.png?v=hd-20260513" alt="HELM - Votre vision, notre direction." />
      <p>Développement commercial premium pour santé, medtech et services B2B.</p>
    </footer>
  );
}

function PageHero({ eyebrow, title, text }) {
  return (
    <section className="page-hero">
      <WaveField />
      <div>
        <span>{eyebrow}</span>
        <h1>{title}</h1>
        <p>{text}</p>
      </div>
      <CompassVisual />
    </section>
  );
}

function ApproachPage() {
  return (
    <main className="page-shell">
      <Header />
      <PageHero
        eyebrow="Approche"
        title="Une direction commerciale claire, humaine et structurée."
        text="HELM part de votre vision, clarifie le marché, puis construit une trajectoire commerciale lisible : les bons comptes, les bons messages, les bons échanges."
      />
      <MethodSection compact />
      <WhySection />
      <FinalCTA />
      <Footer />
    </main>
  );
}

function ServicesPage() {
  return (
    <main className="page-shell">
      <Header />
      <PageHero
        eyebrow="Services"
        title="Des services commerciaux premium pour créer des opportunités."
        text="Ciblage, qualification, conversations commerciales, structuration CRM et reporting : chaque service est pensé pour soutenir une croissance exigeante."
      />
      <ServicesSection compact />
      <ExpertiseSection compact />
      <ProofSection />
      <FinalCTA />
      <Footer />
    </main>
  );
}

function AboutPage() {
  return (
    <main className="page-shell">
      <Header />
      <PageHero
        eyebrow="À propos"
        title="HELM, une marque pensée pour guider sans brusquer."
        text="L'ambition est simple : aider les entreprises à forte valeur ajoutée à avancer commercialement avec calme, méthode et exigence."
      />
      <JourneySection />
      <HumanSection />
      <section className="content-section compact-section">
        <div className="about-card">
          <h2>Votre vision, notre direction.</h2>
          <p>
            HELM s'adresse aux équipes qui savent que le développement commercial ne se résume pas à envoyer plus de messages. Il faut comprendre le marché, respecter le cycle de décision, créer de la confiance et garder une trajectoire claire.
          </p>
        </div>
      </section>
      <WhySection />
      <FinalCTA />
      <Footer />
    </main>
  );
}

function ResourcesPage() {
  return (
    <main className="page-shell">
      <Header />
      <PageHero
        eyebrow="Ressources"
        title="Repères pour mieux piloter votre développement commercial."
        text="Des contenus courts, structurés et utiles pour comprendre vos marchés, vos conversations et vos opportunités."
      />
      <section className="content-section compact-section">
        <div className="resources-grid">
          {resources.map(([type, title, text]) => (
            <article key={title}>
              <span>{type}</span>
              <h2>{title}</h2>
              <p>{text}</p>
              <small>Publication à venir.</small>
            </article>
          ))}
        </div>
      </section>
      <FinalCTA />
      <Footer />
    </main>
  );
}

function HomePage() {
  return (
    <main className="page-shell">
      <Header />
      <Hero />
      <TrustBand />
      <StatsBand />
      <ServicesSection />
      <MethodSection />
      <ProofSection />
      <ExpertiseSection />
      <HumanSection />
      <FinalCTA />
      <Footer />
    </main>
  );
}

function App() {
  const path = window.location.pathname.replace(/\/$/, "") || "/index.html";
  if (path.endsWith("/approche.html")) return <ApproachPage />;
  if (path.endsWith("/services.html")) return <ServicesPage />;
  if (path.endsWith("/a-propos.html")) return <AboutPage />;
  if (path.endsWith("/ressources.html")) return <ResourcesPage />;
  return <HomePage />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);