// Longworth Seeds — Home page · quieter, an official front door

function HomePage({ onNav }) {
  return (
    <div className="route">
      {/* ============== HERO — trimmed ============== */}
      <section className="hero hero-quiet" data-screen-label="01 Hero">
        <div className="hero-photo">
          <img className="kb" src="assets/photo-hay-paddock.jpg" alt="Cut paspalum hay drying in windrows on a Mid North Coast NSW paddock." />
        </div>
        <div className="hero-tint"></div>
        <div className="hero-vignette"></div>

        <div className="wrap hero-inner">
          <div className="hero-eyebrows">
            <span className="chip chip-solid">Est. 1935</span>
            <span className="chip">Harrington · Mid North Coast NSW</span>
          </div>

          <h1 className="display on-dark hero-quiet-title">
            Longworth Seeds. <em>Australian since&nbsp;1935.</em>
          </h1>

          <p className="hero-aside hero-quiet-aside">
            Four generations of the Longworth family harvesting and cleaning <em style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--wheat)' }}>Paspalum dilatatum</em>, Carpet Grass and tropical pasture seed from the Mid North Coast.
          </p>

          <div className="hero-actions" style={{ marginTop: 36 }}>
            <a className="btn btn-primary" href={window.PHONE_SEED_HREF}>
              <Icon.phone /> Call David · {window.PHONE_SEED}
            </a>
            <a className="btn btn-ghost on-dark" href="#contact" onClick={(e)=>{e.preventDefault(); onNav('contact');}}>
              Get in touch <Icon.arrow />
            </a>
          </div>
        </div>
      </section>

      {/* ============== INTRO ============== */}
      <section className="section paper" data-screen-label="02 Intro">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'end', marginBottom: 48 }}>
            <div style={{ gridColumn: 'span 6' }}>
              <span className="eyebrow">§ Who we are</span>
              <h2 className="h2" style={{ marginTop: 20 }}>
                A family seed and cattle business <em>on the Mid North Coast.</em>
              </h2>
            </div>
            <p className="lede" style={{ gridColumn: '8 / span 5' }}>
              We grade pasture seed, cut hay and run cattle from the same paddocks the Longworths have farmed since the 1930s. Same family, same name on the gate.
            </p>
          </div>

          <div className="home-cards">
            {[
              {
                t: 'Seed grading',
                d: "Paspalum, Carpet Grass and four other tropical pasture seeds, cleaned to a coatable standard.",
                img: 'assets/photo-seed-2.jpg',
                pos: '50% 50%',
                more: 'Seed & services',
                go: 'seed',
              },
              {
                t: 'Hay & cattle',
                d: 'Paspalum hay and silage off our own paddocks, plus the Kundle Park Limousin stud.',
                img: 'assets/photo-cattle.jpg',
                pos: '50% 50%',
                more: 'Hay & cattle',
                go: 'cattle',
              },
              {
                t: 'Our story',
                d: "Francis Longworth patented the first comb harvester for grass seed in 1934. Four generations on, we're still at it.",
                img: 'assets/photo-heritage-1948-truck.jpg',
                pos: '40% 50%',
                more: 'About us',
                go: 'heritage',
              },
            ].map(c => (
              <a className="home-card" key={c.t} href={`#${c.go}`} onClick={(e)=>{e.preventDefault(); onNav(c.go);}}>
                <Photo src={c.img} alt={c.t} pos={c.pos} pan="slow" ratio="4/5" />
                <h3 className="h3">{c.t}</h3>
                <p>{c.d}</p>
                <span className="more">{c.more} <Icon.arrow style={{ width: 12, height: 12 }} /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ============== CONTACT CTA ============== */}
      <HomeCta onNav={onNav} />
    </div>
  );
}

function HomeCta({ onNav }) {
  return (
    <section className="section paper tight" data-screen-label="03 CTA">
      <div className="wrap">
        <div className="grid-12" style={{ alignItems: 'center', gap: 64 }}>
          <div style={{ gridColumn: 'span 7' }}>
            <span className="eyebrow">§ Get in touch</span>
            <h2 className="h2" style={{ marginTop: 20, marginBottom: 24 }}>
              Pick up the phone <em>or send a note.</em>
            </h2>
            <p className="lede" style={{ marginBottom: 32 }}>
              David handles seed grading. Peter handles hay and cattle. Both Longworths, both answer.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href={window.PHONE_SEED_HREF}>
                <Icon.phone /> Call David · {window.PHONE_SEED}
              </a>
              <a className="btn btn-ghost" href="#contact" onClick={(e)=>{e.preventDefault(); onNav('contact');}}>
                Send a message <Icon.arrow />
              </a>
            </div>
          </div>
          <div style={{ gridColumn: 'span 5' }}>
            <Photo src="assets/photo-windmill.jpg" alt="Windmill on the Longworth paddock" ratio="4/5" pos="50% 40%" coord="Kundle Kundle · NSW" />
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;
window.HomeCta = HomeCta;