// Grow Hemp — cultivar detail template
// Path-relative to /cbd-seeds/[slug].html so assets resolve from ../

const CULTIVAR_DATA = {
  "el-chabo": {
    number: "03",
    slug: "el-chabo",
    enquiryOnly: true,
    name: "El Chabo",
    aboutHeading: "A true leader",
    positioning: "Mid-tall, CBD-dominant and heavy-yielding, suited to mechanised crops at scale.",
    cbd: "15-16%",
    thc: "< 1%",
    heroImage: "../assets/breeding.jpg",
    heroObjectPos: "center 50%",
    coaIntro: "Certificates of analysis displayed show previous seasons test results. El Chabo has consistently expressed around 16% CBD with THC under 1%. Earlier CoAs for this cultivar use its parent name Cherry Abacus (ChAb).",
    coas: [
      { year: "2026", name: "El Chabo",      image: "../assets/coa-el-chabo-2026.jpg", pdf: "../assets/coa-el-chabo-2026.pdf", cbd: "16.0%", thc: "0.54%" },
      { year: "2025", name: "Cherry Abacus", image: "../assets/coa-el-chabo-2025.jpg", pdf: "../assets/coa-el-chabo-2025.pdf", cbd: "15.8%", thc: "0.40%" },
      { year: "2024", name: "Cherry Abacus", image: "../assets/coa-el-chabo-2024.jpg", pdf: "../assets/coa-el-chabo-2024.pdf", cbd: "16.5%", thc: "0.55%" },
    ],
    about: [
      "El Chabo has earned its kingpin title, leading the CBD stakes and winning the role as the 2025 crop pollinator. Across four seasons of breeding Cherry Wine, Cherry Max, and Cherry Abacus (ChAb), we've produced a hybrid the OGs would be proud of.",
      "Cherry Abacus was originally bred by Colorado CBD Seed in 2016. Our hybrid seeds produce a robust plant with around 16% CBD, accompanied by the fruity tones of Cherry Wine.",
    ],
    packOptions: [
      { size: "50 seeds", price: "$50" },
      { size: "100 seeds", price: "$100" },
    ],
    largerVolume: { label: "Larger volume", price: "POA" },
    packs: [
      { size: "100 Seeds", price: "$100" },
      { size: "500 Seeds", price: "$500" },
    ],
    // Terpene % from sample ChAb 01 #04, June 2024 (total terpenes 1.3%).
    // Cert deliberately not published.
    // Top 5 by volume, same sample. Alpha-Bisabolol and Beta-Caryophyllene
    // tie at 0.142, so their bars are the same length. Bars scale to the highest.
    terpeneChart: [
      { name: "Guaiol",             pct: 0.246 },
      { name: "Alpha-Bisabolol",    pct: 0.142 },
      { name: "Beta-Caryophyllene", pct: 0.142 },
      { name: "Valencene",          pct: 0.108 },
      { name: "D-Limonene",         pct: 0.106 },
    ],
    terpenes: [
      {
        name: "Guaiol",
        pct: "0.246%",
        desc: "Pine and rose, with a soft woody finish. An uncommon terpene in cannabis, more often found in cypress and conifer wood.",
      },
      {
        name: "Beta-Caryophyllene",
        pct: "0.142%",
        desc: "Peppery and warm, like black pepper and cloves. One of the most common terpenes in cannabis and many culinary spices.",
      },
    ],
    specs: [
      { label: "Type", value: "Photoperiod" },
      { label: "Phenotype", value: "Copes well in NZ seasonal conditions" },
      { label: "Flowering time", value: "10-12 weeks" },
      { label: "Height", value: "1.5-2.4 m (5-8 ft)" },
      { label: "Yield", value: "High" },
      { label: "Climate", value: "Outdoor, NZ-suited" },
      { label: "THC", value: "< 1%" },
      { label: "CBD", value: "15-16%" },
    ],
    growing: [
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
      "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
    ],
  },

  "cherry-max": {
    number: "02",
    slug: "cherry-max",
    name: "Cherry Max",
    aboutHeading: "Pheno Maxxing",
    positioning: "Delicate and reliable, with the aroma of sweet cherries and a hint of pepper.",
    cbd: "13-15%",
    thc: "< 1%",
    heroImage: "../assets/cherry-abacus.jpg",
    heroObjectPos: "center 65%",
    coaIntro: "Certificates of analysis displayed show previous seasons test results. Cherry Max has tested between 13% and 15% CBD in three of the four seasons shown, with THC under 1% throughout. The 2025 sample came in lower at 11.3%, a reminder that expression varies across a crop. Earlier CoAs for this cultivar use parent name Cherry Wine (ChWn).",
    coas: [
      { year: "2026", name: "Cherry Max",  image: "../assets/coa-cherry-max-2026.jpg", pdf: "../assets/coa-cherry-max-2026.pdf", cbd: "13.4%", thc: "0.65%" },
      { year: "2025", name: "Cherry Wine", image: "../assets/coa-cherry-max-2025.jpg?v=2", pdf: "../assets/coa-cherry-max-2025.pdf", cbd: "11.3%", thc: "0.25%" },
      { year: "2024", name: "Cherry Wine", image: "../assets/coa-cherry-max-2024.jpg", pdf: "../assets/coa-cherry-max-2024.pdf", cbd: "13.4%", thc: "0.45%" },
      { year: "2023", name: "Cherry Wine", image: "../assets/coa-cherry-max-2023.jpg", pdf: "../assets/coa-cherry-max-2023.pdf", cbd: "14.4%", thc: "0.70%" },
    ],
    about: [
      "By crossing the best of our double Cherry Wine with El Chabo, from Cherry Abacus stock, we've produced offspring that honour both of the internationally recognised CBD strains.",
      "Cherry Max brings new vigour and a higher CBD profile to the original Cherry Wine genetics, whilst retaining its delicate buds and sweet cherry aroma.",
      "These seeds are unfeminised, so expect half to develop as male plants. To manage pollen drift, growers producing for flower should identify and remove males early in the cycle.",
    ],
    packOptions: [
      { size: "20 seeds", price: "$65", stripeUrl: "https://buy.stripe.com/fZu28s3po15t4FL82X2VG06" },
      { size: "50 seeds", price: "$155", stripeUrl: "https://buy.stripe.com/dRm3cwgcaeWj2xD9712VG0a" },
      { size: "100 seeds", price: "$305", stripeUrl: "https://buy.stripe.com/6oUeVebVU29x5JPgzt2VG05" },
    ],
    largerVolume: { label: "Larger volume", price: "POA" },
    packs: [
      { size: "100 Seeds", price: "$100" },
      { size: "500 Seeds", price: "$500" },
    ],
    // Terpene % from sample ChWn 12-01 #08, June 2024 (total terpenes 1.1%).
    // Cert deliberately not published.
    // Top 5 by volume, same sample. Bars scale to the highest value.
    terpeneChart: [
      { name: "Beta-Caryophyllene", pct: 0.230 },
      { name: "D-Limonene",         pct: 0.119 },
      { name: "Beta-Farnesene",     pct: 0.111 },
      { name: "Valencene",          pct: 0.107 },
      { name: "Humulene",           pct: 0.089 },
    ],
    terpenes: [
      {
        name: "Beta-Caryophyllene",
        pct: "0.230%",
        desc: "Peppery and warm, like black pepper and cloves. One of the most common terpenes in cannabis and many culinary spices.",
      },
      {
        name: "D-Limonene",
        pct: "0.119%",
        desc: "Bright citrus, with notes of lemon and orange peel. Common in citrus fruits and herbs.",
      },
    ],
    specs: [
      { label: "Type", value: "Photoperiod" },
      { label: "Phenotype", value: "Pretty flowers with a sweet aroma" },
      { label: "Flowering time", value: "10-12 weeks" },
      { label: "Height", value: "1.2-1.8 m (4-6 ft)" },
      { label: "Yield", value: "Moderate" },
      { label: "Climate", value: "Outdoor, NZ-suited" },
      { label: "THC", value: "< 1%" },
      { label: "CBD", value: "13-15%" },
    ],
    growing: [],
  },

  "awaz-cobbler": {
    number: "01",
    slug: "awaz-cobbler",
    name: "Awaz Cobbler",
    aboutHeading: "Far North family",
    positioning: "A robust plant with a solid CBD profile that tolerates adverse weather conditions.",
    cbd: "13-15%",
    thc: "< 1%",
    heroImage: "../assets/awa.jpg",
    heroObjectPos: "center 50%",
    coaIntro: "Certificates of analysis displayed show previous seasons test results. Awaz Cobbler has tested between 13% and 15% CBD in three of the four seasons shown, with THC under 1% throughout. The 2025 sample came in lower at 11.7%, a reminder that expression varies across a crop. Earlier CoAs for this cultivar use the name Awa.",
    coas: [
      { year: "2026", name: "Awaz Cobbler", image: "../assets/coa-awaz-2026.jpg", pdf: "../assets/coa-awaz-2026.pdf", cbd: "13.1%", thc: "0.42%" },
      { year: "2025", name: "Awa",          image: "../assets/coa-awaz-2025.jpg?v=2", pdf: "../assets/coa-awaz-2025.pdf", cbd: "11.7%", thc: "0.33%" },
      { year: "2024", name: "Awa",          image: "../assets/coa-awaz-2024.jpg", pdf: "../assets/coa-awaz-2024.pdf", cbd: "15.0%", thc: "0.46%" },
      { year: "2023", name: "Awa",          image: "../assets/coa-awaz-2023.jpg", pdf: "../assets/coa-awaz-2023.pdf", cbd: "13.9%", thc: "0.57%" },
    ],
    about: [
      "Awa Cobbler, produced by Brad Hutchinson of Southern Botanicals, originates from an established NZ hemp variety found in the Manawatu-Whanganui region, crossed with the internationally recognised Cobbler CBD strain.",
      "We've bred Brad's cultivar with Cherry Max and El Chabo at our Awanui site in NZ's subtropical Far North. Locally named Awaz, the area benefits from a combination of northern latitude, maritime influence, and abundant sunshine. Awaz Cobbler captures the robust Awa hemp genetics and the Cobbler CBD profile, with 13-15% total potential CBD across our tested seasons.",
    ],
    packOptions: [
      { size: "20 seeds", price: "$65", stripeUrl: "https://buy.stripe.com/28EdRaf865lJ0pvfvp2VG09" },
      { size: "50 seeds", price: "$155", stripeUrl: "https://buy.stripe.com/3cI14o4tsg0n8W14QL2VG08" },
      { size: "100 seeds", price: "$305", stripeUrl: "https://buy.stripe.com/5kQ28s3pog0n6NT82X2VG07" },
    ],
    largerVolume: { label: "Larger volume", price: "POA" },
    packs: [
      { size: "100 Seeds", price: "$100" },
      { size: "500 Seeds", price: "$500" },
    ],
    // Terpene % from sample Awa 10-02 #07, June 2024 (total terpenes 1.1%).
    // Cert deliberately not published.
    // Top 5 by volume, same sample. Bars scale to the highest value.
    terpeneChart: [
      { name: "Beta-Farnesene",     pct: 0.199 },
      { name: "D-Limonene",         pct: 0.129 },
      { name: "Valencene",          pct: 0.124 },
      { name: "Beta-Caryophyllene", pct: 0.116 },
      { name: "Delta-3-Carene",     pct: 0.099 },
    ],
    terpenes: [
      {
        name: "Beta-Farnesene",
        pct: "0.199%",
        desc: "Soft and green, with apple skin and a hint of woody spice. Found in hops, chamomile, and green apples.",
      },
      {
        name: "D-Limonene",
        pct: "0.129%",
        desc: "Bright citrus, with notes of lemon and orange peel. Common in citrus fruits and herbs.",
      },
    ],
    specs: [
      { label: "Type", value: "Photoperiod" },
      { label: "Phenotype", value: "Hardy in wind and bad weather" },
      { label: "Flowering time", value: "10-12 weeks" },
      { label: "Height", value: "1.5-2.4 m (5-8 ft)" },
      { label: "Yield", value: "Moderate to high" },
      { label: "Climate", value: "Outdoor, NZ-suited" },
      { label: "THC", value: "< 1%" },
      { label: "CBD", value: "13-15%" },
    ],
    growing: [],
  },
};

const SLUG_EL = document.querySelector("script[data-cultivar]");
const SCRIPT_SLUG = (SLUG_EL && SLUG_EL.dataset.cultivar) || "el-chabo";
const c = CULTIVAR_DATA[SCRIPT_SLUG];

// Tab title auto-follows the cultivar's on-page name (so renames never go stale).
if (c && c.name) document.title = `${c.name} | Grow Hemp NZ`;

// ─── Shared chrome (Nav, Contact, Footer) ──────────────────────────────
function Nav() {
  return (
    <header className="nav" data-screen-label="Nav">
      <a href="../index.html" className="brand">grow hemp<span className="brand-dot">.</span></a>
      <nav className="nav-links" aria-label="Primary">
        <div className="nav-item nav-has-sub">
          <a href="index.html">CBD Seeds</a>
          <div className="nav-sub" role="menu">
            <a href="/cbd-seeds/cherry-max">Cherry Max</a>
            <a href="/cbd-seeds/awaz-cobbler">Awaz Cobbler</a>
            <a href="/cbd-seeds/el-chabo">El Chabo</a>
          </div>
        </div>
        <a href="/blog">Blog</a>
        <a href="/#contact" data-open-contact>Contact</a>
      </nav>
      <button className="nav-burger" aria-label="Menu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </header>
  );
}

function Breadcrumb() {
  return (
    <div className="breadcrumb" data-screen-label="Breadcrumb">
      <a href="index.html" className="breadcrumb-link">CBD Seeds</a>
    </div>
  );
}

function Hero({ c }) {
  return (
    <section className="cult-hero" data-screen-label="Hero">
      <div className="cult-hero-img" role="img" aria-label={c.name} style={{ position: "absolute", inset: 0, backgroundImage: `url(${c.heroImage})`, backgroundSize: "cover", backgroundPosition: c.heroObjectPos }}>
        <div className="cult-hero-wash"></div>
      </div>
      <div className="cult-hero-content">
        <h1 className="hero-h cult-hero-h">{c.heroTitle || c.name}</h1>
        <div className="cult-hero-stats">
          <span className="cult-hero-stat">
            <span className="cult-hero-stat-label">CBD</span>{c.cbd}
          </span>
          <span className="cult-hero-stat">
            <span className="cult-hero-stat-label">THC</span>{c.thc}
          </span>
        </div>
      </div>
    </section>
  );
}

function openEnquiry(c, summaryLines) {
  window.GrowHempContact.open({
    eyebrow: "Enquiry",
    title: c.name,
    sub: "Tell us what you need and we'll reply within 24 hours.",
    summary: summaryLines,
    subject: `Seed enquiry: ${c.name}`,
    extra: {
      cultivar: c.name,
      order: summaryLines.join(", ") || "General enquiry",
    },
  });
}

function PackSelector({ c }) {
  if (c.enquiryOnly) {
    return (
      <div className="pack-selector">
        <span className="pack-eyebrow">By enquiry</span>
        <p className="pack-enquiry-note">Get in touch to discuss availability and pricing.</p>
        <button
          type="button"
          className="btn btn-accent pack-enquire-btn"
          onClick={() => openEnquiry(c, [])}
        >Express your interest</button>
      </div>
    );
  }
  return <PackPicker c={c} />;
}

function PackPicker({ c }) {
  const rows = c.packOptions || [];
  const LARGER = "__larger__";
  const [choice, setChoice] = React.useState(rows[0] ? rows[0].size : LARGER);

  const isLarger = choice === LARGER;
  const selectedRow = rows.find((r) => r.size === choice) || null;
  const priceDisplay = isLarger
    ? c.largerVolume.price
    : (selectedRow ? selectedRow.price : "");

  // Buy-vs-Enquire: a pack size with a Stripe link buys; larger volume (or any
  // size without a link yet) opens the shared contact modal instead.
  const buyUrl = !isLarger && selectedRow ? selectedRow.stripeUrl : null;
  const isBuy = !!buyUrl;
  const handleAction = () => {
    if (isBuy) {
      window.location.href = buyUrl;
      return;
    }
    openEnquiry(c, isLarger
      ? [`${c.largerVolume.label} (${c.largerVolume.price})`]
      : (selectedRow ? [`1 × ${selectedRow.size}`] : []));
  };

  return (
    <div className="pack-selector">
      <span className="pack-eyebrow">Regular seeds</span>

      <div className="pack-price" aria-live="polite">{priceDisplay}</div>

      <label className="pack-select-label" htmlFor="pack-size-select">Select pack size</label>
      <select
        id="pack-size-select"
        className="pack-select"
        value={choice}
        onChange={(e) => setChoice(e.target.value)}
      >
        {rows.map((r) => (
          <option key={r.size} value={r.size}>{r.size}</option>
        ))}
        <option value={LARGER}>{c.largerVolume.label}</option>
      </select>

      <button
        type="button"
        className="btn btn-accent pack-enquire-btn"
        onClick={handleAction}
      >{isBuy ? "Buy now" : "Enquire"}</button>

      {!isLarger ? <p className="pack-fineprint">Prices include shipping within New Zealand.</p> : null}
    </div>
  );
}

function AboutAndPacks({ c }) {
  return (
    <section className="cult-about" data-screen-label="About & Packs">
      <div className="cult-about-inner">
        <div className="cult-about-col">
          <h2 className="cult-h">{c.aboutHeading || `About ${c.name}.`}</h2>
          {c.about.map((p, i) => {
            const text = typeof p === "string" ? p : p.text;
            const fine = typeof p === "object" && p.fine;
            return (
              <p key={i} className={`body-text cult-body${fine ? " cult-body-fine" : ""}`}>{text}</p>
            );
          })}
        </div>
        <div className="cult-packs-col">
          <h2 className="cult-h">Pack size.</h2>
          <PackSelector c={c} />
        </div>
      </div>
    </section>
  );
}

function CoA({ c }) {
  const coas = c.coas || [];
  const multi = coas.length > 1;
  const [i, setI] = React.useState(0);

  if (!coas.length) return null;
  const active = coas[i] || coas[0];

  return (
    <section className="cult-coa" data-screen-label="Cannabinoid profile">
      <div className="cult-coa-inner">
        <div className="cult-coa-head">
          <span className="cult-eyebrow">Independent lab results · HPLC</span>
          <h2 className="cult-h">Certificates of analysis.</h2>
          {c.coaIntro ? <p className="cult-coa-intro">{c.coaIntro}</p> : null}
        </div>

        <div className="cult-coa-carousel">
          {multi ? (
            <div className="cult-coa-tabs" role="tablist" aria-label="Certificate year">
              {coas.map((co, idx) => (
                <button
                  key={co.year}
                  type="button"
                  className={"cult-coa-tab" + (idx === i ? " is-active" : "")}
                  aria-selected={idx === i}
                  onClick={() => setI(idx)}
                >
                  {co.year}
                </button>
              ))}
            </div>
          ) : null}

          <figure className="cult-coa-figure">
            {coas.map((co, idx) => (
              <img
                key={co.year}
                src={co.image}
                alt={`${co.name} certificate of analysis, ${co.year}`}
                className={"cult-coa-slide" + (idx === i ? " is-active" : "")}
              />
            ))}
          </figure>

          <div className="cult-coa-caption">
            <span className="cult-coa-cap-year">{active.year}</span>
            <span className="cult-coa-cap-name">{active.name}</span>
            {active.cbd ? <span className="cult-coa-cap-stat">Total CBD {active.cbd}</span> : null}
            {active.thc ? <span className="cult-coa-cap-stat">THC {active.thc}</span> : null}
            {active.pdf ? (
              <a
                className="cult-coa-download"
                href={active.pdf}
                download
                aria-label={`Download the full ${active.year} ${active.name} certificate of analysis as a PDF`}
              >Download {active.year} CoA (PDF)</a>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}

// Bars are scaled against the strain's own highest terpene, so each chart
// uses its full width rather than being squashed by a cross-strain maximum.
function TerpeneChart({ rows }) {
  if (!rows || !rows.length) return null;
  const max = Math.max(...rows.map((r) => r.pct));

  return (
    <div className="terp-chart">
      <span className="terp-chart-label">Top 5 terpenes</span>
      <div className="terp-bars">
        {rows.map((r) => (
          <div key={r.name} className="terp-bar-row">
            <span className="terp-bar-name">{r.name}</span>
            <span className="terp-bar-track">
              <span
                className="terp-bar-fill"
                style={{ width: `${(r.pct / max) * 100}%` }}
              />
            </span>
            <span className="terp-bar-val">{r.pct.toFixed(3)}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SpecsAndTerpenes({ c }) {
  return (
    <section className="cult-specs" data-screen-label="Specs & Terpenes">
      <div className="cult-specs-inner">
        <div className="cult-specs-col">
          <h2 className="cult-h">Key strain specs.</h2>
          <dl className="spec-list">
            {c.specs.map((s) => (
              <div key={s.label} className="spec-row">
                <dt className="spec-label">{s.label}</dt>
                <dd className="spec-value">{s.value}</dd>
              </div>
            ))}
          </dl>
        </div>
        <div className="cult-terps-col">
          <h2 className="cult-h">Notable terpenes.</h2>
          <div className="terp-list">
            {c.terpenes.map((t) => (
              <article key={t.name} className="terp-card">
                <div className="terp-head">
                  <span className="terp-name">{t.name}</span>
                  {t.pct ? <span className="terp-pct">{t.pct}</span> : null}
                </div>
                <p className="terp-desc">{t.desc}</p>
              </article>
            ))}
          </div>
          <TerpeneChart rows={c.terpeneChart} />
        </div>
      </div>
    </section>
  );
}

function Growing({ c }) {
  return (
    <section className="cult-growing" data-screen-label="Growing">
      <div className="cult-growing-inner">
        <h2 className="cult-h">Growing notes.</h2>
        <div className="cult-growing-body">
          {c.growing.map((p, i) => (
            <p key={i} className="body-text cult-body">{p}</p>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="contact" id="contact" data-screen-label="Contact">
      <div className="contact-inner">
        <div className="contact-head">
          <h2 className="contact-h">Get in touch.</h2>
          <p className="contact-sub">
            We offer cultivation consultation and buyer introductions as bespoke services. Contact us any time for an obligation-free chat.
          </p>
        </div>
        <div className="contact-grid">
          <a href="tel:+6421333740" className="contact-card">
            <span className="contact-card-label">Phone</span>
            <span className="contact-card-value">+64 21 333 740</span>
            <span className="contact-card-note">Trish Fabling</span>
          </a>
          <a href="mailto:info@growhemp.co.nz" className="contact-card">
            <span className="contact-card-label">Email</span>
            <span className="contact-card-value">info@growhemp.co.nz</span>
            <span className="contact-card-note">Replies within 24 hours</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot" data-screen-label="Footer">
      <div className="foot-inner">
        <div className="foot-top">
          <div className="foot-brand">
            <span className="foot-brand-name">grow hemp.</span>
            <span className="foot-brand-sub">Far North · New Zealand</span>
          </div>
          <div className="foot-links">
            <a href="index.html">CBD Seeds</a>
            <a href="/blog">Blog</a>
            <a href="/#contact" data-open-contact>Contact</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span className="foot-meta">© 2026 Grow Hemp Ltd · growhemp.co.nz</span>
          <div className="foot-legal">
            <a href="../privacy.html">Privacy</a>
            <a href="../terms.html">Terms of Sale</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function RelatedCultivars({ slug }) {
  const TILES = [
    { slug: "cherry-max", name: "Cherry Max", cbd: "13-15%", thc: "< 1%", image: "../assets/cherry-abacus.jpg", objectPos: "center 50%", summary: "A luscious plant with delicate flowers, the scent of cherries and 15% total potential CBD." },
    { slug: "awaz-cobbler", name: "Awaz Cobbler", cbd: "13-15%", thc: "< 1%", image: "../assets/awa.jpg", objectPos: "center 50%", summary: "Robust with a solid CBD profile that can tolerate adverse weather conditions." },
    { slug: "el-chabo", name: "El Chabo", cbd: "15-16%", thc: "< 1%", image: "../assets/breeding.jpg", objectPos: "center 50%", summary: "Our highest performing CBD strain, leading the pack with energy and yield." },
  ];
  const others = TILES.filter((t) => t.slug !== slug);
  return (
    <section className="cult-related" data-screen-label="Next up">
      <div className="cult-related-inner">
        <h2 className="cult-h">Next up.</h2>
        <div className="cult-related-grid">
          {others.map((t) => (
            <a key={t.slug} href={`/cbd-seeds/${t.slug}`} className="cult-card-wrap">
              <article className="cult-card">
                <div className="cult-card-img-link">
                  <div className="cult-card-img">
                    <img src={t.image} alt={t.name} style={{ objectPosition: t.objectPos, objectFit: "cover", width: "100%", height: "100%" }} />
                  </div>
                </div>
                <div className="cult-card-body">
                  <div className="cult-card-row">
                    <span className="cult-card-cbd">CBD {t.cbd}</span>
                    <span className="cult-card-n">THC {t.thc}</span>
                  </div>
                  <h3 className="cult-card-name">{t.name}</h3>
                  <p className="cult-card-summary">{t.summary}</p>
                  <span className="cult-card-readmore">Read more</span>
                </div>
              </article>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div className="stage frame-desktop">
      <div className="site">
        <Nav />
        <Hero c={c} />
        <AboutAndPacks c={c} />
        <CoA c={c} />
        <SpecsAndTerpenes c={c} />
        <RelatedCultivars slug={c.slug} />
        <Contact />
        <Footer />
      </div>
    </div>
  );
}

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