// Culture, CapFrehel, Story, Trust, FAQ, Cart, Footer, Age gate, Toast

const Culture = () => {
  const points = [
    {
      icon: "heather",
      tag: "Terre vierge",
      title: "Sol jamais cultivé",
      text: "Nos plants poussent sur une terre vierge, jamais cultivée auparavant. Un sol intact, sans héritage chimique, qui donne à la fleur toute sa pureté.",
    },
    {
      icon: "star",
      tag: "100% trichomes",
      title: "La fleur, pleine et entière",
      text: "Pas de haschisch, pas de résidus — uniquement la fleur, riche de tous ses trichomes. Une tête pleine, entière, gorgée d'arômes.",
    },
    {
      icon: "sun",
      tag: "Naturel",
      title: "Cultivé naturellement",
      text: "Une culture qui respecte le cycle de la plante, sans forçage ni artifice. On laisse la nature faire son travail.",
    },
    {
      icon: "leaf2",
      tag: "Sans synthèse",
      title: "Engrais naturels",
      text: "Uniquement des engrais d'origine naturelle, jamais de produits chimiques de synthèse. Une nutrition propre, du sol jusqu'à la fleur.",
    },
  ];
  return (
    <section className="culture" id="culture" data-screen-label="Notre culture">
      <div className="culture__header">
        <div className="section-eyebrow reveal">Ce qui nous rend uniques</div>
        <h2 className="section-title reveal reveal--d1" style={{ marginTop: 16 }}>
          Une culture<br/><em>d'exception</em>
        </h2>
      </div>
      <div className="culture__grid">
        {points.map((p, i) => (
          <div key={p.title} className={`culture-card reveal reveal--d${i + 1}`}>
            <div className="culture-card__num">0{i + 1}</div>
            <div className="culture-card__icon"><Icon kind={p.icon} size={22} /></div>
            <div className="culture-card__tag">{p.tag}</div>
            <h3 className="culture-card__title">{p.title}</h3>
            <p className="culture-card__text">{p.text}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

const CapFrehel = () => {
  return (
    <section className="cap-frehel" id="cap-frehel" data-screen-label="04 Cap Fréhel">
      <div className="cap-frehel__inner">
        <div className="section-eyebrow reveal">Ancré en Bretagne</div>
        <h2 className="cap-frehel__title reveal reveal--d1">
          Au pied des falaises<br/><em>du Cap Fréhel</em>
        </h2>
        <p className="cap-frehel__text reveal reveal--d2">
          Cap Fréhel. Les falaises de grès rose qui plongent dans la Manche.
          Les landes de bruyère violette balayées par le vent d'ouest. Le phare qui veille depuis des siècles
          sur les marins bretons. C'est ici que tout a commencé — et c'est ici que nos plantes trouvent leur caractère.
        </p>
        <div className="cap-frehel__pillars">
          <div className="cap-pillar reveal reveal--d1">
            <div className="cap-pillar__icon"><Icon kind="wave" size={20} /></div>
            <h3 className="cap-pillar__title">L'air marin</h3>
            <p className="cap-pillar__text">
              Les embruns de la Manche et l'iode naturel de la côte d'Armor confèrent
              à nos cultures un terroir unique, impossible à reproduire ailleurs.
            </p>
          </div>
          <div className="cap-pillar reveal reveal--d2">
            <div className="cap-pillar__icon"><Icon kind="heather" size={20} /></div>
            <h3 className="cap-pillar__title">Les landes</h3>
            <p className="cap-pillar__text">
              La bruyère, les ajoncs dorés, la fougère — notre CBD pousse parmi eux,
              partageant le même sol acide et sauvage des landes bretonnes.
            </p>
          </div>
          <div className="cap-pillar reveal reveal--d3">
            <div className="cap-pillar__icon"><Icon kind="shield" size={20} /></div>
            <h3 className="cap-pillar__title">Le caractère breton</h3>
            <p className="cap-pillar__text">
              Comme le granit rose de la côte d'Émeraude, notre démarche est solide,
              durable, sans compromis. Le caractère breton gravé dans chaque produit.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Story = () => {
  return (
    <section className="story" id="story" data-screen-label="05 Histoire">
      <div className="story__inner">
        <div className="story__visual reveal">
          <div className="story__frame">
            <div className="story__frame-placeholder">
              <strong>Rod, le fondateur</strong>
              [ photo à insérer ]
            </div>
          </div>
          <div className="story__accent">Cap Fréhel<br/>Bretagne</div>
        </div>
        <div>
          <div className="section-eyebrow reveal reveal--d1">Notre histoire</div>
          <h2 className="story__title reveal reveal--d1" style={{ marginTop: 14 }}>
            Monsieur Rod,<br/><em>un Breton, une passion</em>
          </h2>
          <p className="story__pull reveal reveal--d2">
            « J'ai grandi au bruit des vagues du Cap Fréhel. Cette terre m'a appris
            la rigueur et le respect. »
          </p>
          <p className="story__text reveal reveal--d3">
            Enfant des Côtes-d'Armor, <strong>Rod</strong> a toujours eu la Bretagne dans le sang.
            Après un parcours de santé difficile, il découvre le CBD — et quelque chose change profondément.
            Il cherche une alternative naturelle, proche de sa terre, à l'image des gens d'ici :
            <strong> sans artifice, sans mensonge</strong>.
          </p>
          <p className="story__text reveal reveal--d3">
            La réponse était là, dans ces landes qu'il arpente depuis l'enfance.
            Il commence à cultiver, à sélectionner, à comprendre. Chaque souche choisie
            avec l'exigence d'un <strong>artisan breton</strong>, chaque lot contrôlé
            comme on taille le granit de la côte.
          </p>
          <p className="story__text reveal reveal--d4">
            Aujourd'hui, <strong>Monsieur Rod</strong> c'est la Bretagne dans un sachet.
            Un terroir, une histoire, une promesse. <em>Hep Breizh, n'eus netra</em> —
            sans la Bretagne, il n'y a rien.
          </p>
          <div className="story__sig reveal reveal--d4">— Rod, Cap Fréhel</div>
        </div>
      </div>
    </section>
  );
};

const Trust = () => {
  const cards = [
    { icon: "lab",    title: "Analyses COA",     text: "Chaque lot est analysé par un laboratoire indépendant accrédité. Taux CBD et THC certifiés. Certificats disponibles sur demande." },
    { icon: "leaf2",  title: "Sans pesticides",  text: "Culture raisonnée, sans pesticides de synthèse, sans OGM. Nos partenaires respectent des cahiers des charges stricts et vérifiables." },
    { icon: "eu",     title: "100% légal UE",    text: "Tous nos produits contiennent moins de 0,3% de THC, conformément au règlement UE 2018/848 et à la législation française." },
    { icon: "package", title: "Ancré en Bretagne", text: "Produit et expédié depuis les Côtes-d'Armor. Emballage neutre et discret, expédié sous 24–48h en colis suivi." },
  ];
  return (
    <section className="trust" id="trust" data-screen-label="06 Qualité">
      <div className="trust__header">
        <div className="section-eyebrow reveal">Notre promesse</div>
        <h2 className="section-title reveal reveal--d1" style={{ marginTop: 16 }}>
          Qualité, transparence,<br/><em>Breizh</em>
        </h2>
      </div>
      <div className="trust__grid">
        {cards.map((c, i) => (
          <div key={c.title} className={`trust-card reveal reveal--d${i + 1}`}>
            <div className="trust-card__icon"><Icon kind={c.icon} size={20} /></div>
            <h3 className="trust-card__title">{c.title}</h3>
            <p className="trust-card__text">{c.text}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Le CBD est-il légal en France ?", a: "Oui. Depuis 2021, la vente de fleurs et feuilles de CBD est légale en France sous conditions : taux de THC inférieur ou égal à 0,3%, chanvre de variétés autorisées. Nos produits sont strictement conformes à la réglementation française et européenne en vigueur." },
    { q: "Le CBD est-il un stupéfiant ? Va-t-il me « défoncer » ?", a: "Non. Le CBD n'est pas un stupéfiant et n'a aucun effet psychoactif, contrairement au THC. C'est un complément bien-être, pas un médicament. Le CBD légal en France contient un taux de THC inférieur ou égal à 0,3%." },
    { q: "Quels effets ressent-on avec le CBD ?", a: "Le CBD est un complément bien-être. Les utilisateurs rapportent un effet apaisant (anxiété, stress), une meilleure qualité de sommeil, un amoindrissement de certaines douleurs (musculaires, menstruelles) et une diminution des nausées. Les effets varient d'une personne à l'autre. Le CBD n'est pas un médicament et ne remplace pas un avis médical." },
    { q: "Comment passez-vous une commande ?", a: "Sélectionnez vos fleurs, ajoutez-les au panier, et finalisez le paiement sécurisé. Expédition sous 24–48h en colis discret par Colissimo (€4,90, France métropolitaine). Pour une quantité spécifique, écrivez-nous à mrrodcbd@yahoo.com." },
    { q: "Quelle est votre politique de retour ?", a: "Conformément à la législation, vous disposez de 14 jours pour retourner un produit non ouvert et non descellé. Les produits consommables ouverts ne peuvent être retournés pour des raisons d'hygiène. Plus d'infos sur notre page Livraison & retours." },
    { q: "Le CBD a-t-il des effets secondaires ?", a: "Le CBD est généralement bien toléré. Effets possibles : somnolence légère, bouche sèche. Déconseillé aux femmes enceintes ou allaitantes, aux personnes sous traitement médical (consultez votre médecin), et aux mineurs. Ne pas conduire après consommation." },
    { q: "D'où viennent vos fleurs ?", a: "Nos fleurs sont issues de la génétique High Alpine Genetics, cultivées en serre (greenhouse) sur la récolte 2025. Nous sélectionnons chaque variété pour son profil aromatique et sa qualité de culture. Le contrôle qualité et l'expédition se font depuis les Côtes-d'Armor." },
    { q: "Vos produits sont-ils testés en laboratoire ?", a: "Systématiquement. Chaque lot dispose d'un certificat d'analyse (COA) réalisé en laboratoire indépendant : analyse cannabinoïdes (CBD/THC), conformité du taux de THC (≤ 0,3%) et transparence sur l'origine. Le COA est consultable sur demande." },
  ];
  return (
    <section className="faq" id="faq" data-screen-label="07 FAQ">
      <div className="faq__inner">
        <div className="celtic-divider reveal">
          <div className="celtic-divider__line"></div>
          <CelticKnot />
          <div className="celtic-divider__line"></div>
        </div>
        <div className="section-eyebrow reveal">Questions fréquentes</div>
        <h2 className="section-title reveal reveal--d1" style={{ marginTop: 16 }}>
          Tout ce que vous voulez<br/><em>vraiment</em> savoir
        </h2>
        <div className="faq__list">
          {items.map((it, i) => (
            <div
              key={i}
              className={"faq__item " + (open === i ? "faq__item--open" : "")}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="faq__q">
                <div className="faq__q-text">{it.q}</div>
                <div className="faq__q-toggle">+</div>
              </div>
              <div className="faq__a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="footer" id="contact" data-screen-label="08 Footer">
      <div className="footer__top">
        <div>
          <div className="footer__brand-mark">Monsieur <em>Rod</em></div>
          <p className="footer__desc">
            CBD premium artisanal, ancré au Cap Fréhel.
            Cultivé en Europe, sélectionné avec exigence, certifié à chaque lot.
          </p>
          <div className="footer__seal">
            <div className="footer__seal-dot"></div>
            <span>Réservé aux adultes · 18+</span>
          </div>
        </div>
        <div>
          <div className="footer__heading">Boutique</div>
          <div className="footer__links">
            <a href="#shop">Toutes les fleurs</a>
            <a href="#shop">Indoor Premium</a>
            <a href="#shop">Greenhouse</a>
            <a href="panier.html">Panier</a>
          </div>
        </div>
        <div>
          <div className="footer__heading">Maison</div>
          <div className="footer__links">
            <a href="#cap-frehel">Cap Fréhel</a>
            <a href="#trust">Qualité</a>
            <a href="#faq">FAQ</a>
          </div>
        </div>
        <div>
          <div className="footer__heading">Aide & Légal</div>
          <div className="footer__links">
            <a href="livraison.html">Livraison & retours</a>
            <a href="cgv.html">CGV</a>
            <a href="rgpd.html">Confidentialité (RGPD)</a>
            <a href="mentions-legales.html">Mentions légales</a>
            <a href="mailto:mrrodcbd@yahoo.com">mrrodcbd@yahoo.com</a>
          </div>
        </div>
      </div>

      <p className="footer__disclaimer">
        <strong>Avertissement CBD —</strong> Le CBD est un complément bien-être, ce n'est pas un médicament
        et il ne se substitue en aucun cas à un traitement. Le CBD n'est pas un stupéfiant et n'a aucun
        effet psychoactif (contrairement au THC). Nos produits contiennent un taux de THC inférieur ou égal
        à 0,3%, conformément au règlement UE 2018/848. Réservés aux personnes majeures (18+). Ne pas dépasser
        la dose recommandée. Déconseillé aux femmes enceintes ou allaitantes, et aux personnes sous traitement
        médical : demandez conseil à votre médecin. Ne pas conduire après consommation.
      </p>

      <div className="footer__bottom" style={{ marginTop: 32 }}>
        <div>© 2026 Mr Rod — Cap Fréhel, Bretagne · SIRET 988 138 335 00019</div>
        <div>Hep Breizh, n'eus netra</div>
      </div>
    </footer>
  );
};

const Cart = ({ items, open, onClose, onUpdate, onRemove }) => {
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const shipping = subtotal === 0 ? 0 : 4.9;
  const shippingLabel = subtotal === 0 ? "—" : "€" + shipping.toFixed(2).replace(".", ",");
  const total = subtotal + shipping;
  const mailAddr = "mrrodcbd@yahoo.com";
  const [order, setOrder] = React.useState(null);
  const [copied, setCopied] = React.useState(false);
  const enc = encodeURIComponent;
  const copyOrder = () => {
    try {
      navigator.clipboard.writeText(order.body).then(() => setCopied(true), () => setCopied(false));
    } catch (e) { setCopied(false); }
  };

  const handleCheckout = () => {
    const eur = (n) => "€" + n.toFixed(2).replace(".", ",");
    const lines = items.map(it => `- ${it.qty}x ${it.name} (${it.weight}) — ${eur(it.price * it.qty)}`).join("\n");
    const body =
`Bonjour Monsieur Rod,

Je souhaite passer la commande suivante :

${lines}

Sous-total : ${eur(subtotal)}
Livraison (Colissimo suivi) : ${eur(shipping)}
Total : ${eur(total)}

Mes coordonnees de livraison :
Nom / Prenom :
Adresse :
Code postal / Ville :
Telephone :
Email :

Je confirme avoir 18 ans ou plus.
Je reglerai par virement bancaire des reception de votre confirmation et de l'IBAN.

Merci !`;
    const subject = "Nouvelle commande - Monsieur Rod";
    setOrder({ subject, body });
    setCopied(false);
  };

  return (
    <>
      <div className={"cart-backdrop " + (open ? "cart-backdrop--open" : "")} onClick={onClose}></div>
      <aside className={"cart " + (open ? "cart--open" : "")}>
        <div className="cart__header">
          <div className="cart__title">Votre panier</div>
          <button className="cart__close" onClick={onClose} aria-label="Fermer">✕</button>
        </div>
        <div className="cart__items">
          {items.length === 0 ? (
            <div className="cart__empty">
              <div className="cart__empty-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 6h2l2 12h12l2-9H6" />
                  <circle cx="9" cy="21" r="1" />
                  <circle cx="18" cy="21" r="1" />
                </svg>
              </div>
              <div className="cart__empty-title">Panier vide</div>
              <div className="cart__empty-text">Le faisceau cherche encore vos prochaines fleurs.</div>
            </div>
          ) : items.map((it, i) => (
            <div key={i} className="cart-item">
              <div className="cart-item__media">
                {it.image
                  ? <img src={it.image} alt={it.name} />
                  : <div className="product__emoji" style={{ fontSize: "1.8rem" }}>{it.emoji}</div>}
              </div>
              <div>
                <div className="cart-item__name">{it.name}</div>
                <div className="cart-item__meta">{it.weight} · {it.type}</div>
                <div className="cart-item__price">€{(it.price * it.qty).toFixed(2).replace(".", ",")}</div>
              </div>
              <div className="cart-item__actions">
                <div className="cart-qty">
                  <button onClick={() => onUpdate(i, Math.max(1, it.qty - 1))}>−</button>
                  <span className="cart-qty__val">{it.qty}</span>
                  <button onClick={() => onUpdate(i, it.qty + 1)}>+</button>
                </div>
                <button className="cart-item__remove" onClick={() => onRemove(i)}>Retirer</button>
              </div>
            </div>
          ))}
        </div>
        {items.length > 0 && (
          <div className="cart__footer">
            <div className="cart__row">
              <span>Sous-total</span>
              <span>€{subtotal.toFixed(2).replace(".", ",")}</span>
            </div>
            <div className="cart__row">
              <span>Livraison</span>
              <span>{shippingLabel}</span>
            </div>
            <div className="cart__row cart__row--total">
              <span>Total</span>
              <span>€{total.toFixed(2).replace(".", ",")}</span>
            </div>
            <button className="cart__checkout" onClick={handleCheckout}>Commander par email →</button>
            <div className="cart__notice">Commande par email · Paiement par virement · Colis discret · 24-48h</div>
          </div>
        )}
      </aside>

      {order && (
        <div className="order-modal" onClick={() => setOrder(null)}>
          <div className="order-modal__card" onClick={(e) => e.stopPropagation()}>
            <button className="order-modal__close" onClick={() => setOrder(null)} aria-label="Fermer">✕</button>
            <div className="order-modal__title">Finaliser ma <em>commande</em></div>
            <p className="order-modal__lead">
              Envoyez votre commande à <strong>{mailAddr}</strong>.
              Choisissez votre messagerie, ou copiez le récapitulatif et collez-le dans un email.
            </p>
            <textarea className="order-modal__text" readOnly value={order.body}></textarea>
            <button className="order-modal__copy" onClick={copyOrder}>
              {copied ? "Commande copiée ✓" : "Copier la commande"}
            </button>
            <div className="order-modal__send">
              <a className="btn btn--gold" href={`https://compose.mail.yahoo.com/?to=${enc(mailAddr)}&subject=${enc(order.subject)}&body=${enc(order.body)}`} target="_blank" rel="noopener">Yahoo Mail</a>
              <a className="btn btn--ghost" href={`https://mail.google.com/mail/?view=cm&fs=1&to=${enc(mailAddr)}&su=${enc(order.subject)}&body=${enc(order.body)}`} target="_blank" rel="noopener">Gmail</a>
              <a className="btn btn--ghost" href={`mailto:${mailAddr}?subject=${enc(order.subject)}&body=${enc(order.body)}`}>App mail</a>
            </div>
            <div className="order-modal__note">
              Paiement par virement à réception de notre confirmation et de l'IBAN. Réservé aux personnes majeures (18+).
            </div>
          </div>
        </div>
      )}
    </>
  );
};

const AgeGate = ({ onConfirm, onDeny }) => {
  return (
    <div className="age-gate" role="dialog" aria-modal="true">
      <div className="age-gate__card">
        <div className="age-gate__leaf">
          <Icon kind="leaf" size={28} />
        </div>
        <h2 className="age-gate__title">Monsieur <em>Rod</em></h2>
        <div className="age-gate__sub">CBD Premium · Cap Fréhel</div>
        <p className="age-gate__q">
          Êtes-vous majeur·e ?
        </p>
        <div className="age-gate__actions">
          <button className="age-gate__btn age-gate__btn--no" onClick={onDeny}>
            Non, j'ai moins de 18 ans
          </button>
          <button className="age-gate__btn age-gate__btn--yes" onClick={onConfirm}>
            Oui, j'ai 18 ans ou plus
          </button>
        </div>
        <div className="age-gate__legal">
          En entrant, vous confirmez avoir l'âge légal requis pour acheter des produits CBD.
          Vente strictement interdite aux mineurs.
        </div>
      </div>
    </div>
  );
};

const Toast = ({ message, show }) => {
  return (
    <div className={"toast " + (show ? "toast--show" : "")}>
      <span className="toast__dot"></span>
      <span>{message}</span>
    </div>
  );
};

Object.assign(window, { Culture, CapFrehel, Story, Trust, FAQ, Footer, Cart, AgeGate, Toast });