// Grow Hemp — CBD Seeds landing page (placeholder)
// Lives at /cbd-seeds/index.html — paths relative to that location.

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",
    soon: false,
  },
  {
    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",
    soon: false,
  },
  {
    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",
    soon: false,
  },
];

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/">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 Hero() {
  return (
    <section className="cult-hero" data-screen-label="Hero" style={{ position: "relative", height: "480px", overflow: "hidden", display: "block" }}>
      <div className="cult-hero-img" role="img" aria-label="Hemp crop, Far North" style={{ position: "absolute", inset: 0, backgroundImage: "url(../assets/cbd-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">CBD Seeds.</h1>
      </div>
    </section>
  );
}

function Intro() {
  return (
    <section className="intro" data-screen-label="Intro">
      <div className="intro-inner">
        <h2 className="intro-h">Three CBD hemp cultivars.</h2>
        <p className="intro-body">
          Hemp can now be grown in NZ without a licence. We've spent eight years preparing, selecting and stabilising genetics in the Far North to supply growers with CBD hemp strains they can trust.
        </p>
      </div>
    </section>
  );
}

function CultivarCard({ c }) {
  const Card = (
    <article className={`cult-card ${c.soon ? "cult-card-soon" : ""}`}>
      <div className="cult-card-img-link">
        <div className="cult-card-img">
          <img src={c.image} alt={c.name} style={{ objectPosition: c.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 {c.cbd}</span>
          <span className="cult-card-n">THC {c.thc}</span>
        </div>
        <h3 className="cult-card-name">{c.name}</h3>
        <p className="cult-card-summary">{c.summary}</p>
        {c.soon
          ? <span className="cult-card-readmore cult-card-readmore-soon">Coming soon</span>
          : <span className="cult-card-readmore">Read more</span>}
      </div>
    </article>
  );
  if (c.soon) return Card;
  return (
    <a href={c.href} className="cult-card-wrap">
      {Card}
    </a>
  );
}

function CultivarGrid() {
  return (
    <section className="cultivars" id="cultivars" data-screen-label="Cultivars">
      <div className="cultivars-inner">
        <div className="cultivars-head">
          <h2 className="cultivars-h">The lineup.</h2>
        </div>
        <div className="cult-grid cult-grid-card">
          {CULTIVARS.map((c) => <CultivarCard key={c.name} c={c} />)}
        </div>
      </div>
    </section>
  );
}

function FromBlog() {
  const posts = [
    {
      href: "/blog/high-cbd-does-not-mean-high-thc",
      img: "../assets/blog-cbd-thc.jpg",
      alt: "Close-up of a frosty CBD hemp flower",
      title: "High CBD ≠ high THC",
      excerpt: "A high CBD percentage doesn't automatically mean high THC. It comes down to the plant's chemotype, and the ratio between the two cannabinoids.",
    },
    {
      href: "/blog/hemp-seed-or-clones",
      img: "../assets/blog-seed-or-clones.jpg",
      alt: "Hemp seedlings emerging from soil",
      title: "Hemp seed or clones?",
      excerpt: "Climate, soil type, rainfall, and your intended end use all influence whether seed or clones, and which cultivar, will be best suited to your situation.",
    },
    {
      href: "/blog/growing-hemp-nz-new-regulations",
      img: "../assets/blog-hemp-nz.jpg",
      alt: "Flowering hemp plants growing in a Far North field",
      title: "NZ's new hemp regulations",
      excerpt: "On 28 May 2026 the industrial hemp licence was replaced by a simple annual notification. Here's what growers need to know before planting.",
    },
  ];
  return (
    <section className="cultivars" data-screen-label="From the blog">
      <div className="cultivars-inner">
        <div className="blog-teaser-head">
          <h2 className="cultivars-h">From the blog.</h2>
          <a href="/blog" className="blog-teaser-all">See all articles</a>
        </div>
        <div className="blog-teaser-grid">
          {posts.map((p) => (
            <a key={p.href} className="post-card" href={p.href}>
              <div className="post-card-media">
                <img src={p.img} alt={p.alt} />
              </div>
              <div className="post-card-body">
                <h3 className="post-card-title">{p.title}</h3>
                <p className="post-card-excerpt">{p.excerpt}</p>
                <span className="post-card-more">Read more</span>
              </div>
            </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="/cbd-seeds/">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">Privacy</a>
            <a href="/terms">Terms of Sale</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <div className="stage frame-desktop">
      <div className="site">
        <Nav />
        <Hero />
        <Intro />
        <CultivarGrid />
        <FromBlog />
        <Footer />
      </div>
    </div>
  );
}

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