// Grow Hemp — homepage v4
// Pure white, near-black, vivid orange. Sans only. No arrow glyphs.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "viewport": "desktop",
  "accent": "#FF4D1F",
  "tileStyle": "card"
}/*EDITMODE-END*/;

const CULTIVARS = [
  {
    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 13-15% total potential CBD.",
    href: "/cbd-seeds/cherry-max",
  },
  {
    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.",
    href: "/cbd-seeds/awaz-cobbler",
  },
  {
    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.",
    href: "/cbd-seeds/el-chabo",
  },
];

// ─── Tweaks ─────────────────────────────────────────────────────────────
function GrowHempTweaks({ t, setTweak }) {
  const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Frame">
        <TweakRadio
          label="Viewport"
          value={t.viewport}
          onChange={(v) => setTweak("viewport", v)}
          options={[
            { label: "Mobile", value: "mobile" },
            { label: "Desktop", value: "desktop" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Accent colour">
        <TweakColor
          label="Accent"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#FF4D1F", "#F23B0E", "#FF6B2C", "#E84A1B"]}
        />
      </TweakSection>
      <TweakSection title="Cultivars">
        <TweakSelect
          label="Tile style"
          value={t.tileStyle}
          onChange={(v) => setTweak("tileStyle", v)}
          options={[
            { label: "Card", value: "card" },
            { label: "Full-bleed", value: "fullbleed" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ─── Nav ───────────────────────────────────────────────────────────────
function Nav() {
  return (
    <header className="nav" data-screen-label="Nav">
      <a href="#" 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="cbd-seeds/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>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="cult-hero" data-screen-label="Hero">
      <div className="cult-hero-img" role="img" aria-label="Hemp crop, Far North" style={{ position: "absolute", inset: 0, backgroundImage: "url(assets/hero.jpg)", backgroundSize: "cover", backgroundPosition: "center 50%" }}>
        <div className="cult-hero-wash"></div>
      </div>
      <div className="cult-hero-content">
        <h1 className="hero-h cult-hero-h">Buy NZ Hemp Genetics</h1>
        <div className="cult-hero-stats">
          <span className="cult-hero-stat">
            <span className="cult-hero-stat-label">CBD</span>&gt; 13%
          </span>
          <span className="cult-hero-stat">
            <span className="cult-hero-stat-label">THC</span>&lt; 1%
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── Intro ─────────────────────────────────────────────────────────────
function Intro() {
  return (
    <section className="intro" data-screen-label="Intro">
      <div className="intro-inner">
        <h2 className="intro-h">A new chapter for hemp in New Zealand.</h2>
        <div className="intro-body">
          <p>As of 28 May 2026, any cannabis plant containing no more than 1% THC can be cultivated, possessed, processed, sold, or supplied in New Zealand without a licence.</p>
          <p>Get prepared to grow hemp in the coming season by purchasing premium NZ-bred seeds from our selection of CBD hemp varieties.</p>
          <p>See full details on the <a href="/blog/growing-hemp-nz-new-regulations">new hemp regulations</a></p>
        </div>
      </div>
    </section>
  );
}

// ─── Cultivar tile ──────────────────────────────────────────────────────
function CultivarCard({ c }) {
  const href = c.href || `cbd-seeds/${c.name.toLowerCase().replace(/\s+/g, "-")}.html`;
  return (
    <article className="cult-card">
      <a href={href} className="cult-card-img-link" aria-label={`${c.name} details`}>
        <div className="cult-card-img">
          <img src={c.image} alt={c.name} style={{ objectPosition: c.objectPos, objectFit: "cover", width: "100%", height: "100%" }} />
        </div>
      </a>
      <div className="cult-card-body">
        <div className="cult-card-row">
          <span className="cult-card-cbd">CBD {c.cbd}</span>
          <span className="cult-card-n">THC {c.thc}</span>
        </div>
        <h3 className="cult-card-name">
          <a href={href}>{c.name}</a>
        </h3>
        <p className="cult-card-summary">{c.summary}</p>
        <a className="cult-card-readmore" href={href}>Read more</a>
      </div>
    </article>
  );
}

function CultivarFullbleed({ c }) {
  const href = c.href || `cbd-seeds/${c.name.toLowerCase().replace(/\s+/g, "-")}.html`;
  return (
    <article className="cult-fb">
      <a href={href} className="cult-fb-link" aria-label={`${c.name} details`}>
        <div className="cult-fb-img">
          <img src={c.image} alt={c.name} style={{ objectPosition: c.objectPos, objectFit: "cover", width: "100%", height: "100%" }} />
          <div className="cult-fb-wash"></div>
        </div>
        <div className="cult-fb-body">
          <div className="cult-fb-top">
            <span className="cult-fb-n">{c.n}</span>
            <span className="cult-fb-cbd">CBD {c.cbd}</span>
          </div>
          <div className="cult-fb-bottom">
            <h3 className="cult-fb-name">{c.name}</h3>
            <p className="cult-fb-summary">{c.summary}</p>
            <span className="cult-fb-readmore">Read more</span>
          </div>
        </div>
      </a>
    </article>
  );
}

function Cultivars({ tileStyle }) {
  return (
    <section className="cultivars" id="cultivars" data-screen-label="Cultivars">
      <div className="cultivars-inner">
        <div className="cultivars-head">
          <h2 className="cultivars-h">CBD seeds.</h2>
          <p className="cultivars-sub">Each of our CBD hemp cultivars has tested under 1% THC every season since 2022. By sourcing from a trusted local breeder, you can avoid the paperwork and costs associated with importing from overseas suppliers.</p>
        </div>
        <div className={`cult-grid cult-grid-${tileStyle}`}>
          {CULTIVARS.map((c) =>
            tileStyle === "fullbleed"
              ? <CultivarFullbleed key={c.name} c={c} />
              : <CultivarCard key={c.name} c={c} />
          )}
        </div>
      </div>
    </section>
  );
}

// ─── Story (inset panel, rounded) ────────────────────────────────────
function Story() {
  return (
    <section className="story" id="story" data-screen-label="Story">
      <div className="story-inner">
        <div className="story-content">
          <h2 className="story-h">
            Specialising in genetics.
          </h2>
          <div className="story-stats">
            <span>Research &amp; Breeding</span>
            <span className="story-stats-sep" aria-hidden="true">·</span>
            <span>Organic Standards</span>
          </div>
          <div className="story-body">
            <p>Far North Hemp has been perfecting the art and science of breeding cannabis genetics since 2018.</p>
            <p>Our CBD programme began in 2022 using three established strains, Cherry Wine, Cherry Abacus and Awa Cobbler. Cherry Wine was chosen as the pollen donor for the first year, and the resulting line became known as Cherry Max, with boosted vigour and increased CBD levels.</p>
            <p>Every season since 2023, we have submitted samples for Certificate of Analysis (CoA) testing at accredited New Zealand laboratories. The strongest of those plants becomes the pollinator for the next season, allowing us to continually select and improve the genetics.</p>
            <p>Plants grown from the same seed line don't all express the same CBD levels. Results vary naturally across a crop and fall into a bell curve, showing the range each cultivar expresses.</p>
          </div>
        </div>
        <div className="story-genealogy">
          {window.Genealogy ? <window.Genealogy /> : null}
        </div>
      </div>
    </section>
  );
}

// ─── Contact ──────────────────────────────────────────────────────────
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>
  );
}

// ─── Footer (solid orange) ───────────────────────────────────────────
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="cbd-seeds/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>
  );
}

// ─── Root ──────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  return (
    <div className={`stage frame-${t.viewport}`}>
      <div className="site">
        <Nav />
        <Hero />
        <Intro />
        <Cultivars tileStyle={t.tileStyle} />
        <Story />
        <Contact />
        <Footer />
      </div>
      <GrowHempTweaks t={t} setTweak={setTweak} />
    </div>
  );
}

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