// Sections — comparison, nutrition, free-from, clinical, ingredients, reviews, FAQ, footer

function CompareSection() {
  const competitors = ["Sleep Truffles", "Melatonin Gummies", "Rx Sedatives", "Magnesium"];
  const rows = [
    ["Plant-based whole food", [true, false, false, false]],
    ["Non-habit forming",      [true, true,  false, true]],
    ["No next-day grog",       [true, false, false, true]],
    ["Endocannabinoid support",[true, false, false, false]],
    ["Lab-tested purity",      [true, false, true,  false]],
    ["Living-soil grown",      [true, false, false, false]],
    ["Tastes like dessert",    [true, true,  false, false]],
  ];
  return (
    <section className="block" id="compare">
      <div className="container">
        <h2 className="section-title">Sleep Truffles is a more-in-one sleep solution.</h2>
        <div className="compare-wrap">
          <table className="compare-table">
            <thead>
              <tr>
                <th></th>
                {competitors.map((c, i) => (
                  <th key={c} className={i === 0 ? "col-us" : ""}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map(([label, vals]) => (
                <tr key={label}>
                  <td>{label}</td>
                  {vals.map((v, i) => (
                    <td key={i} className={i === 0 ? "col-us" : ""}>
                      {v ? <span className="check"><IconCheck size={12} /></span>
                         : <span className="cross"><IconX size={11} /></span>}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function NutritionSection() {
  const facts = [
    ["Calories",       "45"],
    ["Total Fat",      "3.5g"],
    ["Carbohydrate",   "4g"],
    ["Total Sugar",    "2g"],
    ["Naturally Occurring Sugar", "2g"],
    ["Protein",        "0.5g"],
    ["Cocoa Solids",   "70%"],
    ["Daily Phytonutrients", "1.4g"],
    ["Plant Cannabinoids",   "≤ 0.3% Δ⁹-THC"],
  ];
  return (
    <section className="block" id="nutrition">
      <div className="container">
        <div className="twocol">
          <div>
            <h2 className="section-title">In One Truffle of<br/>Aulv Sleep Truffles</h2>
            <p style={{ color: "var(--muted)", marginTop: 16, maxWidth: 420, lineHeight: 1.6 }}>
              One truffle, eaten 45 minutes before bed. No mixing, no measuring,
              no second-guessing your dose.
            </p>
            <div className="nutrition-list">
              {facts.map(([lbl, val]) => (
                <div className="row" key={lbl}>
                  <span className="lbl">{lbl}</span>
                  <span className="val">{val}</span>
                </div>
              ))}
            </div>
            <div className="nutrition-foot">
              ¹ Lab-verified per serving by independent third-party. <a href="#">View Supplement Facts</a>
            </div>
          </div>
          <div className="twocol-img">
            <div className="placeholder-img">
              <span style={{ fontSize: 11, letterSpacing: ".12em" }}>Single truffle · cocoa</span>
            </div>
          </div>
        </div>

        <div className="free-grid">
          <div>
            <div className="free-eyebrow">Free of</div>
            <div className="free-list">
              <span>Melatonin</span>
              <span>Artificial Sweeteners</span>
              <span>Synthetic CBD Isolates</span>
              <span>Dairy or Lactose</span>
              <span>Gluten or Wheat</span>
            </div>
          </div>
          <div>
            <div className="free-eyebrow">Diet friendly</div>
            <div className="free-list">
              <span>Vegan</span>
              <span>Gluten-Free</span>
              <span>Paleo</span>
              <span>Keto-friendly</span>
              <span>Non-GMO</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ClinicalSection() {
  return (
    <section className="block" id="science">
      <div className="container">
        <div className="clinical-grid">
          <div className="clinical-img">
            <div className="placeholder-img">
              <span style={{ fontSize: 11, letterSpacing: ".12em" }}>Hand · truffle in palm</span>
            </div>
          </div>
          <div>
            <h2 className="section-title">Formulated for your body.<br/>Clinically observed.</h2>
            <p style={{ color: "var(--muted)", marginTop: 16, maxWidth: 480, lineHeight: 1.6 }}>
              Our scientists and herbalists worked with third-party researchers to study
              Aulv's plant-cannabinoid profile against placebo. Here is what they observed.
            </p>
            <div className="clin-eyebrow">Improves key sleep markers within 7 nights*</div>
            <div className="stat-row">
              <div className="stat">
                <div className="num">82<sup>%</sup></div>
                <div className="desc">of subjects reported faster sleep onset within 30 minutes.</div>
              </div>
              <div className="stat">
                <div className="num">73<sup>%</sup></div>
                <div className="desc">reported deeper, more restorative REM sleep.</div>
              </div>
            </div>
            <div className="clin-eyebrow">Clinically shown to support the body's own sleep response</div>
            <div className="stat-row">
              <div className="stat">
                <div className="num">10<sup>×</sup></div>
                <div className="desc">increase in self-reported "waking refreshed" vs baseline.</div>
              </div>
              <div className="stat">
                <div className="num">0<sup></sup></div>
                <div className="desc">cases of dependency, tolerance, or grogginess reported.</div>
              </div>
            </div>
            <div className="stat-foot">
              * 14-day open-label observational study, n=128 adults aged 28–62.
              Sleep onset and REM measured by validated wearable tracker.
              Individual results vary. Statements have not been evaluated by the FDA.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function IngredientsSection() {
  const items = [
    {
      h: "Ancient Landrace Cannabis",
      p: "Living-soil grown landrace strains carry a fuller, naturally-balanced cannabinoid and terpene profile — far beyond synthetic CBD isolates.",
    },
    {
      h: "Ghirardelli Cocoa",
      p: "Single-origin dark cocoa is rich in anandamide and theobromine, which work alongside the plant compounds to soften the wind-down.",
    },
    {
      h: "Organic Coconut MCT",
      p: "Medium-chain triglycerides act as a fat carrier, helping the active compounds absorb gently and predictably each night.",
    },
    {
      h: "Madagascar Vanilla & Sea Salt",
      p: "A whisper of vanilla bean and finishing salt — no sugar bombs, no artificial flavorings, no funky aftertaste.",
    },
  ];
  return (
    <section className="block" id="ingredients">
      <div className="container">
        <div className="ingr-grid">
          <div className="ingr-left">
            <h2 className="section-title">High-quality ingredients, in their whole form.</h2>
            <p style={{ marginTop: 16 }}>
              Every truffle is hand-tempered with four ingredients that we'd happily eat
              ourselves. No fillers, no synthetics, no powdered shortcuts.
            </p>
          </div>
          <div className="ingr-right">
            {items.map(it => (
              <div key={it.h} className="ingr-item">
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ReviewsSection() {
  const reviews = [
    {
      title: "Finally — sleep without the hangover.",
      body: "I've tried melatonin, magnesium, prescription Z-drugs. Aulv is the first thing that gets me down within 20 minutes and lets me wake up clear. I'm a convert.",
      name: "Daniel T.", date: "April 2026"
    },
    {
      title: "Tastes like a treat. Works like a charm.",
      body: "The cocoa is genuinely delicious — I look forward to it. By night three I noticed I was sleeping through without the 3 AM wake-up I'd had for years.",
      name: "Maya R.",  date: "March 2026"
    },
    {
      title: "Two-year ritual now.",
      body: "I've been taking these every night for almost two years. Same dose, same effect, no tolerance. The bulk subscription pays for itself.",
      name: "Priya S.", date: "Feb 2026"
    },
  ];
  return (
    <section className="block" id="reviews">
      <div className="container">
        <div className="reviews-head">
          <h2 className="section-title">12,000+ verified 5-star reviews for Aulv Sleep Truffles.</h2>
        </div>
        <div className="reviews-grid">
          {reviews.map((r, i) => (
            <div key={i} className="review-card">
              <div className="review-stars">
                {[0,1,2,3,4].map(j => <IconStar key={j} size={14} />)}
              </div>
              <h5>{r.title}</h5>
              <p>{r.body}</p>
              <div className="review-meta">
                <span>{r.name}</span>
                <span>{r.date}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const faqs = [
    ["When should I expect to feel Sleep Truffles?",
     "Most members report onset within 20–45 minutes. We recommend taking one truffle ~45 minutes before bed, alongside your wind-down routine."],
    ["Will I feel groggy in the morning?",
     "No — the plant compounds in Sleep Truffles work with your body's own endocannabinoid system, which winds down naturally as you wake. We've heard 'I woke up genuinely rested' more times than we can count."],
    ["What do the different flavors taste like?",
     "Original Cocoa is a rich, classic dark chocolate with sea salt. Dark Mint adds a hint of fresh peppermint oil. Both are 70% cocoa, lightly sweetened with coconut sugar."],
    ["Are Sleep Truffles legal where I live?",
     "Sleep Truffles contain ≤0.3% Δ⁹-THC by dry weight, which is federally legal in the United States under the 2018 Farm Bill. State laws vary — check yours before ordering."],
    ["What makes Aulv different from other plant-based sleep aids?",
     "Most products use synthetic isolates or oil tinctures. We use whole-plant landrace strains grown in living soil, hand-tempered into a single, food-grade chocolate so the dose is precise and the experience is enjoyable."],
    ["What products does Aulv replace?",
     "Most members replace melatonin gummies, OTC sleep aids, magnesium stacks, and the occasional nightcap. Some also reduce dependency on prescription sleep medications under their doctor's care."],
    ["What measures do you take to ensure quality?",
     "Every batch is third-party tested for cannabinoid potency, residual solvents, heavy metals, pesticides, and microbial contaminants. COAs are public and available with every order."],
    ["How do I take Sleep Truffles?",
     "Eat one truffle 45 minutes before bed. If you're new to plant cannabinoids, start with half a truffle and work up. Consistency over weeks matters more than any single night."],
  ];
  return (
    <section className="block" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-intro">
            <h2 className="section-title">FAQs</h2>
            <p>
              Sleep Truffles were designed as a foundational, nutrition-first supplement
              for adults seeking better, more natural sleep.
            </p>
            <p>
              The formula has decades of plant-medicine tradition and real human consistency
              behind it — but you know your body best. If your questions aren't answered here,
              please reach out to your healthcare practitioner.
            </p>
          </div>
          <div className="faq-list">
            {faqs.map(([q, a], i) => (
              <details key={q} className="faq" {...(i === 0 ? { open: true } : {})}>
                <summary>{q}<span className="plus" /></summary>
                <div className="faq-body">{a}</div>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SiteFooter() {
  const cols = [
    { h: "Shop", links: ["Sleep Truffles", "Travel Pack", "Bulk Save", "Gift Cards", "Bundles"] },
    { h: "Daily ritual", links: ["Why Aulv", "How it works", "Plant compounds", "Ingredients", "Living soil"] },
    { h: "Support", links: ["Order status", "Subscriptions", "Help center", "Contact us", "FAQs"] },
    { h: "Company", links: ["About", "Lab results", "Press", "Careers", "Blog"] },
  ];
  return (
    <footer className="site">
      <div className="container-wide">
        {cols.map(c => (
          <div key={c.h}>
            <h6>{c.h}</h6>
            <ul>{c.links.map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
        ))}
        <div>
          <h6>Stay rested</h6>
          <p style={{ fontSize: 13, color: "rgba(255,255,255,.6)", margin: 0 }}>
            Plant-medicine essays, occasional drops, member-only pricing.
          </p>
          <form className="news-form" onSubmit={(e) => e.preventDefault()}>
            <input type="email" placeholder="you@inbox.com" />
            <button type="submit">Sign up</button>
          </form>
        </div>
      </div>
      <div className="container-wide" style={{ display: "block" }}>
        <div className="megalogo">Aulv</div>
        <div className="footer-bottom">
          <div>© 2026 Aulv Health, Inc. · United States (USD)</div>
          <div className="socials">
            <a href="#" aria-label="Instagram">IG</a>
            <a href="#" aria-label="Twitter">X</a>
            <a href="#" aria-label="TikTok">TT</a>
            <a href="#" aria-label="YouTube">YT</a>
          </div>
        </div>
        <div style={{
          fontSize: 10.5, color: "rgba(255,255,255,.32)",
          lineHeight: 1.6, marginTop: 28, maxWidth: 920,
        }}>
          † These statements have not been evaluated by the Food and Drug Administration.
          This product is not intended to diagnose, treat, cure, or prevent any disease.
          Sleep Truffles contain ≤0.3% Δ⁹-THC by dry weight, federally compliant under the
          2018 Agriculture Improvement Act. State laws vary — please check yours. Not for
          use by anyone under 21, pregnant, nursing, or operating heavy machinery.
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  CompareSection, NutritionSection, ClinicalSection,
  IngredientsSection, ReviewsSection, FAQSection, SiteFooter,
});