// sections.jsx — Site sections

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="logo">
          <StarLogo size={26} />
          <span>StarNetworks</span>
        </a>
        <div className="nav-links">
          <a href="#solutions">Solutions</a>
          <a href="#how">How it works</a>
          <a href="#coverage">Coverage</a>
          <a href="#stories">Stories</a>
          <a href="#plans">Plans</a>
          <a href="#support">Site support</a>
          <a href="#contact">Contact</a>
        </div>
        <a href="#contact" className="nav-cta">Get a quote</a>
      </div>
    </nav>
  );
}

function Hero({ variant }) {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-eyebrow">Total technology solutions · Hospitality & Rural</div>
        <h1>
          From hotels<br/>
          to hilltops,<br/>
          we do <em>IT all.</em>
        </h1>
        <p className="hero-sub">
          StarNetworks is a total solution technology business with two distinct specialties.<br/><br/>
          <strong>Hospitality</strong> — one technology partner for everything in your hotel, motel, or luxury lodge. From phones and WiFi to gate automation and in-room entertainment.<br/>
          <strong>Rural</strong> — total solutions for orchards, vineyards, wineries, and luxury lodges.
        </p>
        <div className="hero-ctas">
          <a href="#solutions" className="btn btn-primary">
            See what we do <span className="arrow">→</span>
          </a>
          <a href="#contact" className="btn btn-ghost">Get in touch</a>
        </div>

        <div className="hero-meta">
          <div>PROPERTIES<strong>40+ hotels & lodges</strong></div>
          <div>SITES LIVE<strong>27 towers across Otago</strong></div>
          <div>SUPPORT<strong>Local crew, 7 days</strong></div>
          <div>INSTALLED<strong>500+ systems</strong></div>
        </div>

        <div className="hero-stage">
          <div className="stage-label">
            {variant === 'diagram' && 'LIVE NETWORK · OUR INFRASTRUCTURE'}
            {variant === 'photo' && 'CENTRAL OTAGO · OUR BACKYARD'}
            {variant === 'map' && 'COVERAGE MAP · MANIOTOTO'}
          </div>
          {variant === 'diagram' && <P2PDiagram />}
          {variant === 'photo' && <PhotoPlaceholder caption="HERO PHOTO · TOWER ON RIDGE AT GOLDEN HOUR" />}
          {variant === 'map' && <TopoMap withPins={true} />}
        </div>
      </div>
    </section>
  );
}

function Solutions() {
  return (
    <section className="block" id="solutions">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">01</span> What we do</div>
        <h2 className="section-title">Two specialties, one team.</h2>
        <p className="section-lede">
          Whether you're running a 40-room hotel or a 4,000-hectare station, we design, install, and support every piece of technology you need — with a local crew who actually answer the phone.
        </p>

        <div className="compare">
          <div className="compare-card us">
            <h4>Specialty one</h4>
            <p className="name">Hospitality</p>
            <ul>
              <li>Guest internet and WiFi that actually works — every room, every device, no dead spots.</li>
              <li>Telephones in rooms, security cameras, and security systems — integrated by one team.</li>
              <li>Gate automation and gate communications — intercom, vehicle access, perimeter control.</li>
              <li>In-room entertainment — secure casting for any TV platform, plus immersive media solutions on LG ProCentric and Samsung LynkCloud.</li>
              <li>One number to call. One service provider. On-site within hours, not days.</li>
            </ul>
          </div>
          <div className="compare-card">
            <h4>Specialty two</h4>
            <p className="name">Rural</p>
            <ul>
              <li>Point-to-point wireless internet where fibre doesn't reach — fast, low-latency, unmetered.</li>
              <li>Orchard & vineyard sensor networks, weather stations, irrigation control.</li>
              <li>Multi-building links — connect the woolshed, homestead, and cellar door on one network.</li>
              <li>Starlink & fibre integration, failover, and network design.</li>
              <li>Local crew who know the land and the technology — same-day response, most days.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const [step, setStep] = React.useState(0);
  const steps = [
    {
      title: 'A tower on a hill',
      copy: 'We put radio gear on a high site with line-of-sight back to our fibre handover. One uplink, hundreds of homes possible.'
    },
    {
      title: 'A small dish on yours',
      copy: 'A tidy 30cm dish bolted to a roof corner or a pole, pointed straight at the tower. No sky alignment, no moving parts.'
    },
    {
      title: 'Light, not lag',
      copy: 'Your traffic travels through the air on licensed and licence-exempt millimetre-wave bands. Speed of light, not speed of orbit.'
    },
    {
      title: 'Hands-on locals',
      copy: 'We live here too. If a storm takes a panel down, we drive out. Same day, most days. No call centre overseas.'
    },
  ];
  return (
    <section className="block" id="how">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">02</span> How our wireless works</div>
        <h2 className="section-title">Hilltop to home, in a straight line.</h2>
        <p className="section-lede">
          Point-to-point wireless is the oldest trick in long-distance comms,
          done well. We pick the right hill, get a tight line-of-sight back to
          fibre, and beam it to you.
        </p>

        <div className="how">
          <div className="how-diagram">
            <P2PDiagram />
          </div>
          <div className="how-steps">
            {steps.map((s, i) => (
              <div key={i}
                   className={`how-step${i === step ? ' active' : ''}`}
                   onMouseEnter={() => setStep(i)}>
                <div className="n">0{i+1}</div>
                <div>
                  <h3>{s.title}</h3>
                  <p>{s.copy}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Compare() {
  return (
    <section className="block">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">03</span> vs satellite</div>
        <h2 className="section-title">Why most rural folks pick us over the sky.</h2>
        <p className="section-lede">
          Satellite has its place — we'll be the first to say it. But if there's
          line-of-sight to one of our towers, ground-based wireless wins on every
          number that matters.
        </p>

        <div className="compare">
          <div className="compare-card us">
            <h4>StarNetworks · Point-to-point</h4>
            <p className="name">Ground-based wireless</p>
            <ul>
              <li>~8 ms latency to Christchurch — feels like fibre.</li>
              <li>Symmetrical-ish speeds, up to 300 / 100.</li>
              <li>Unmetered. No fair-use trickery.</li>
              <li>Local crew, local SLA. We own the towers.</li>
              <li>One-off install, then a flat monthly bill.</li>
            </ul>
          </div>
          <div className="compare-card">
            <h4>Low-earth-orbit satellite</h4>
            <p className="name">Sky-based wireless</p>
            <ul>
              <li>30–60 ms latency, more in bad weather.</li>
              <li>Speeds vary with cell load and time of day.</li>
              <li>Hardware cost up front, plus monthly.</li>
              <li>Support's offshore. SLA is whatever you read about.</li>
              <li>Needs a clear view of most of the sky.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Coverage() {
  const [addr, setAddr] = React.useState('');
  const [result, setResult] = React.useState(null);

  const check = (e) => {
    e?.preventDefault();
    if (!addr.trim()) {
      setResult({ ok: false, msg: 'Enter an address or RAPID number to check coverage.' });
      return;
    }
    // pseudo-random but deterministic by address
    const hash = [...addr.toLowerCase()].reduce((a,c)=>a+c.charCodeAt(0),0);
    const inRange = hash % 7 !== 0;
    if (inRange) {
      const km = (1.2 + (hash % 130) / 10).toFixed(1);
      const tower = ['Wedderburn', 'Obelisk', 'Rock & Pillar'][hash % 3];
      setResult({
        ok: true,
        msg: `Looks good. Nearest tower: ${tower} · ${km} km away. Line-of-sight likely. We'll do a free site survey to confirm.`
      });
    } else {
      setResult({
        ok: false,
        msg: `We don't have a tower close enough yet — but we're adding sites every quarter. Drop us your details and we'll let you know when you're in.`
      });
    }
  };

  return (
    <section className="block" id="coverage">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">04</span> Coverage</div>
        <h2 className="section-title">See if we can reach you.</h2>
        <p className="section-lede">
          Twenty-seven sites across the Maniototo, Strath Taieri, and the
          Manuherikia valley — and growing. Most rural addresses within these
          regions can be served. Try yours.
        </p>

        <div className="coverage">
          <div className="check-box">
            <form className="check-input" onSubmit={check}>
              <input
                placeholder="123 Old Dunstan Road, Ranfurly"
                value={addr}
                onChange={(e) => setAddr(e.target.value)}
              />
              <button type="submit" className="btn btn-primary">Check</button>
            </form>
            <div className="check-result">
              {result === null && (
                <>
                  <strong>READY</strong>
                  <br/>Enter your rural address or RAPID number above.
                  <br/>We'll tell you the nearest tower and likely speed.
                </>
              )}
              {result && result.ok && (
                <>
                  <strong>IN COVERAGE</strong>
                  <br/>{result.msg}
                </>
              )}
              {result && !result.ok && (
                <>
                  <strong style={{color: 'var(--ink-2)'}}>NOT YET</strong>
                  <br/>{result.msg}
                </>
              )}
            </div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--ink-3)', letterSpacing: '0.04em', lineHeight: 1.6,
            }}>
              ◇ TOWER  ·  • CUSTOMER  ·  — BACKBONE LINK
            </div>
          </div>
          <div className="map-frame">
            <TopoMap withPins={true} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Stories() {
  const stories = [
    {
      caption: 'SHEEP STATION · CENTRAL OTAGO',
      quote: "Used to spend half the morning waiting for the bank to load. Now my kid does Zoom school from the kitchen table without a stutter.",
      name: 'Hamish McLeod',
      role: 'Hamish & Sons Farming · Patearoa',
      stats: [['Speed', '180 Mbps'], ['Ping', '9 ms'], ['Uptime', '99.96%']],
    },
    {
      caption: 'CELLAR DOOR · BANNOCKBURN',
      quote: "EFTPOS used to drop out three times an afternoon in summer. Touch wood, hasn't happened once since the boys put the dish on the shed roof.",
      name: 'Jen & Pete Whitaker',
      role: 'Schist Block Wines · Bannockburn',
      stats: [['Speed', '120 Mbps'], ['Ping', '11 ms'], ['Uptime', '99.92%']],
    },
    {
      caption: 'BOUTIQUE HOTEL · QUEENSTOWN',
      quote: "We were spending half our week fighting the WiFi. Star came in, ripped out the old gear, and now we don't even think about it. Guests comment on how good the internet is — that never happened before.",
      name: 'Sarah Chen',
      role: 'The Ridge Hotel · Queenstown',
      stats: [['Rooms', '32'], ['APs', '18'], ['Uptime', '99.97%']],
    },
  ];
  return (
    <section className="block" id="stories">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">05</span> Stories</div>
        <h2 className="section-title">From the people who put up with us.</h2>

        <div className="stories">
          {stories.map((s, i) => (
            <div className="story" key={i}>
              <div className="story-photo">{s.caption}</div>
              <blockquote>{s.quote}</blockquote>
              <div className="story-stats">
                {s.stats.map(([l, v], j) => (
                  <span key={j}>{l}<strong>{v}</strong></span>
                ))}
              </div>
              <div className="story-meta">
                <strong>{s.name}</strong>
                <span>{s.role}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Plans({ structure }) {
  const all = [
    {
      tag: 'Whare', price: 89, speed: '50 / 20 Mbps',
      features: ['Unmetered data', 'Standard install $249', 'Email & weekday support'],
      featured: false,
    },
    {
      tag: 'Station', price: 129, speed: '120 / 40 Mbps',
      features: ['Unmetered data', 'Standard install included', 'Static IP available', '7-day support'],
      featured: true,
    },
    {
      tag: 'Homestead', price: 179, speed: '300 / 100 Mbps',
      features: ['Unmetered data', 'Priority install', 'Static IP included', '4-hour SLA, 7 days'],
      featured: false,
    },
  ];
  let selected = all;
  let cls = 'plans three';
  if (structure === 'two') { selected = [all[0], all[1]]; cls = 'plans two'; }
  if (structure === 'one') { selected = [all[1]]; cls = 'plans one'; }

  return (
    <section className="block" id="plans">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">06</span> Rural internet</div>
        <h2 className="section-title">Simple monthly. No data caps.</h2>
        <p className="section-lede">
          One free site survey. One install fee, sometimes waived. One flat monthly
          bill — no off-peak, no fair-use, no nonsense.
        </p>
        <div className={cls}>
          {selected.map((p, i) => (
            <div className={`plan${p.featured ? ' featured' : ''}`} key={i}>
              <h4>{p.tag}</h4>
              <div className="price">${p.price}<small>/month</small></div>
              <div className="speed">{p.speed} · unmetered</div>
              <ul>
                {p.features.map((f, j) => <li key={j}>{f}</li>)}
              </ul>
              <a href="#contact" className="btn btn-ghost"
                 style={{justifyContent:'center', marginTop: 'auto'}}>Get this plan</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Support() {
  return (
    <section className="block" id="support">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">07</span> Site support</div>
        <h2 className="section-title">Already a customer? We're here.</h2>
        <p className="section-lede">
          Something not right? Need a hand with your kit? We're local, we're quick, and we actually answer the phone.
        </p>

        <div className="contact-grid">
          <div style={{display:'flex', flexDirection:'column', gap: 16}}>
            <div className="contact-row">
              <div className="label">Office hours</div>
              <div className="value">Mon–Fri, 8am–6pm</div>
            </div>
            <div className="contact-row">
              <div className="label">Phone</div>
              <div className="value">03 444 8821</div>
            </div>
            <div className="contact-row">
              <div className="label">After hours</div>
              <div className="value">021 STARNET</div>
            </div>
            <div className="contact-row">
              <div className="label">Email</div>
              <div className="value">service@starnetworks.nz</div>
            </div>
            <div className="contact-row">
              <div className="label">Remote support</div>
              <div className="value">We can dial into most kit remotely — give us a ring first.</div>
            </div>
            <div className="contact-row">
              <div className="label">On-site</div>
              <div className="value">Same-day in most of Central Otago. We'll let you know when we're on the way.</div>
            </div>
          </div>
          <aside className="quote-side">
            <h4>Common fixes</h4>
            <ol style={{margin:0, paddingLeft: 18, color:'var(--ink-2)', fontSize:14, lineHeight: 1.7}}>
              <li>Power-cycle the little white box on the wall — wait 30 seconds, plug it back in.</li>
              <li>Check the dish outside hasn't moved. High winds can knock it a few degrees.</li>
              <li>Still down? Ring us. We'll check the tower link from our end while you're on the phone.</li>
            </ol>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="block" id="contact">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">08</span> Get a quote</div>
        <h2 className="section-title">Tell us where you are.</h2>
        <p className="section-lede">
          Drop us your details and we'll arrange to come out and have a look
          at your place — figure out whether we can reach you and what it'd
          take. No pressure, no auto-emails.
        </p>

        <div className="contact-grid">
          <form onSubmit={submit}>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
              <div className="field">
                <label>First name</label>
                <input required placeholder="Hamish" />
              </div>
              <div className="field">
                <label>Last name</label>
                <input required placeholder="McLeod" />
              </div>
            </div>
            <div className="field">
              <label>Address (rural is fine)</label>
              <input required placeholder="123 Old Dunstan Road, Ranfurly 9398" />
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
              <div className="field">
                <label>Phone</label>
                <input required placeholder="027 123 4567" />
              </div>
              <div className="field">
                <label>Use case</label>
                <select>
                  <option>Home / family</option>
                  <option>Working from home</option>
                  <option>Farm / business</option>
                  <option>Multiple buildings</option>
                </select>
              </div>
            </div>
            <div className="field">
              <label>Anything we should know?</label>
              <textarea placeholder="Hill behind the woolshed, a few big poplars on the eastern boundary…" />
            </div>
            <button type="submit" className="btn btn-primary"
                    style={{width:'100%', justifyContent:'center'}}>
              {sent ? 'Cheers — we\'ll be in touch.' : <>Send it through <span className="arrow">→</span></>}
            </button>
          </form>

          <aside className="quote-side">
            <h4>Or just ring us</h4>
            <div className="contact-row">
              <div className="label">Office</div>
              <div className="value">03 444 8821</div>
            </div>
            <div className="contact-row">
              <div className="label">After hours</div>
              <div className="value">021 STARNET</div>
            </div>
            <div className="contact-row">
              <div className="label">Email</div>
              <div className="value">service@starnetworks.nz</div>
            </div>
            <div className="contact-row">
              <div className="label">Yard</div>
              <div className="value">17 Charlemont St, Ranfurly</div>
            </div>

            <h4 style={{marginTop: 32}}>What happens next</h4>
            <ol style={{margin:0, paddingLeft: 18, color:'var(--ink-2)', fontSize:14, lineHeight: 1.7}}>
              <li>We check your address against tower line-of-sight on our map.</li>
              <li>If it's borderline, we drive out for a free site survey.</li>
              <li>Install takes about half a day. We test it before we leave.</li>
              <li>You're online by the time we shut the gate.</li>
            </ol>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="logo" style={{marginBottom: 16}}>
              <StarLogo size={26} />
              <span style={{color:'var(--ink)', fontWeight:600}}>StarNetworks</span>
            </div>
            <p style={{maxWidth: '36ch', margin:0, color:'var(--ink-2)', fontSize: 14, lineHeight: 1.6}}>
              Total technology solutions for hospitality and rural Otago. Locally owned, locally staffed. Started in a shed in Ranfurly, 2019.
            </p>
          </div>
          <div>
            <h5>Service</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#coverage">Coverage map</a></li>
              <li><a href="#plans">Plans</a></li>
              <li><a href="#stories">Stories</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Crew</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Status page</a></li>
            </ul>
          </div>
          <div>
            <h5>Get in touch</h5>
            <ul>
              <li><a href="#contact">service@starnetworks.nz</a></li>
              <li><a href="#contact">03 444 8821</a></li>
              <li><a href="#contact">17 Charlemont St, Ranfurly</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 STARNETWORKS LTD · LICENSED RSP · NZBN 9429051234567</span>
          <span>BUILT IN THE MANIOTOTO</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, Solutions, HowItWorks, Compare, Coverage, Stories, Plans, Support, Contact, Footer,
});