// marketing.jsx — Renegade public homepage
const { useState: mUseState } = React;

/* embedded eligibility widget — one field accepts address or NMI */
const inferLookupMode = (value) => /^\s*\d{10,11}\s*$/.test(value || '') ? 'nmi' : 'address';
const EligibilityWidget = ({ onCheck, compact }) => {
  const [val, setVal] = mUseState('');
  const inferred = inferLookupMode(val);
  return (
    <div className="widget" role="form" aria-label="Check your eligibility">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
        <h3>See your price in 30 seconds</h3>

      </div>
      <Field
        label="Start typing your address, or paste the NMI from your bill."
        icon={inferred === 'nmi' ? 'hash' : 'mapPin'}
        placeholder="e.g. 14 Carrington Rd or 41034873362"
        value={val}
        onChange={e => setVal(e.target.value)}
        inputMode="text"
      />
      <Button variant="primary" size="lg" className="btn-block" onClick={() => onCheck(inferred, val)}>
        Get started <Icon n="arrowRight" size={18} />
      </Button>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center', marginTop: 14, fontSize: 12.5, color: 'var(--fg-3)' }}>
        <Icon n="shield" size={14} /> No lock-in contracts · No exit fees · Switch in minutes
      </div>
    </div>
  );
};
window.EligibilityWidget = EligibilityWidget;

const HeroMeta = () => (
  <div className="hero-meta">
    <span><Icon n="check" size={15} style={{ color: 'var(--accent)' }} />No rooftop solar? You're in.</span>
    <span><Icon n="check" size={15} style={{ color: 'var(--accent)' }} />No lock-in, no exit fees.</span>
  </div>
);

const Hero = ({ variant, onCheck, onNav }) => {
  const heroBody = 'Solar homes are more expensive to serve. Right now, everyone else helps cover the gap. We only serve homes without solar, so the saving comes back to you.';
  if (variant === 'stat') {
    return (
      <section className="hero">
        <div className="hero-glow" />
        <div className="container">
          <div className="hero-grid">
            <div>
              <h1 className="hero-display">You don’t have solar.<br />Why pay for it?</h1>
              <p className="hero-sub">{heroBody}</p>
              <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
                <Button variant="primary" size="lg" onClick={() => onNav('signup')}>Get started <Icon n="arrowRight" size={18} /></Button>
                <Button variant="secondary" size="lg" onDark onClick={() => onNav('home', 'how')}>How it works</Button>
              </div>
              <HeroMeta />
            </div>
            <div className="hero-statcards">
              <div className="hstat hstat-accent">
                <div className="lab">Typical saving</div>
                <div className="big">$100<span className="u">/year</span></div>
                <div className="note">Versus the default market offer across NSW and QLD.</div>
              </div>
              <div className="hstat">
                <div className="lab">Addressable homes</div>
                <div className="big">2.1<span className="u">m</span></div>
                <div className="note">Non-solar households with a smart meter today.</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
  if (variant === 'centered') {
    return (
      <section className="hero">
        <div className="hero-glow" style={{ left: '50%', right: 'auto', transform: 'translateX(-50%)', top: -160, width: 700 }} />
        <div className="container" style={{ textAlign: 'center', paddingTop: 88, paddingBottom: 80, position: 'relative' }}>
          <h1 className="hero-display" style={{ maxWidth: 980, margin: '0 auto' }}>You don’t have solar. Why pay for it?</h1>
          <p className="hero-sub" style={{ margin: '24px auto 0', textAlign: 'center' }}>{heroBody}</p>
          <div style={{ maxWidth: 520, margin: '36px auto 0', textAlign: 'left' }}>
            <EligibilityWidget onCheck={onCheck} />
          </div>
        </div>
      </section>
    );
  }
  // default: split — headline + widget
  return (
    <section className="hero">
      <div className="hero-glow" />
      <div className="container">
        <div className="hero-grid">
          <div>
            <h1 className="hero-display">You don’t have solar.<br />Why pay for it?</h1>
            <p className="hero-sub">{heroBody}</p>
            <HeroMeta />
          </div>
          <div><EligibilityWidget onCheck={onCheck} /></div>
        </div>
      </div>
      <button className="scroll-cue" aria-label="Scroll to the Renegade difference" onClick={() => document.getElementById('difference')?.scrollIntoView({ behavior: 'smooth' })}>
        <span>Scroll</span>
        <Icon n="chevronDown" size={18} />
      </button>
    </section>
  );
};
window.Hero = Hero;

const FEATURES = [
  { icon: 'shield', t: 'No cross-subsidy', d: 'We don\'t sign up solar exporters on standard plans, so non-solar customers stop footing the bill for everyone else\'s panels.' },
  { icon: 'activity', t: 'Real-time usage', d: 'Read your half-hourly consumption in the app the day after it happens — not four weeks later when the bill lands.' },
  { icon: 'fileText', t: 'Plain English bills', d: 'See supply, peak, shoulder and off-peak charges without the tariff soup. If a fee exists, it has to earn its place.' },
];
const Features = () => (
  <section className="section" id="difference">
    <div className="container">
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
        <div className="eyebrow eyebrow-accent">The Renegade difference</div>
        <h2 style={{ fontSize: 'var(--fs-48)', marginTop: 14 }}>Built for the bills you actually get.</h2>
        <p className="lede" style={{ marginTop: 14 }}>No tiered traps, no jargon, no quiet repricing at month four. What you see is what you pay, locked for twelve months.</p>
      </div>
      <div className="feature-grid">
        {FEATURES.map(f => (
          <div className="feature" key={f.t}>
            <div className="ico"><Icon n={f.icon} size={24} /></div>
            <h4>{f.t}</h4>
            <p>{f.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const HOW = [
  { t: 'Start with address or NMI', d: 'Tell us your address or NMI. We pull your distributor, meter type and tariff in seconds.' },
  { t: 'See a real price', d: 'A plain estimate against the published reference price — no asterisks hiding a worse rate.' },
  { t: 'Switch in minutes', d: 'We coordinate the transfer with your old retailer. No interruption to your supply, ever.' },
];
const HowItWorks = () => (
  <section className="section" style={{ background: 'var(--bg-page)' }} id="how">
    <div className="container">
      <div className="split">
        <div>
          <div className="eyebrow eyebrow-accent">How it works</div>
          <h2 style={{ fontSize: 'var(--fs-48)', marginTop: 14 }}>See your price in 30 seconds. Switch in minutes.</h2>
          <p className="lede" style={{ marginTop: 16, maxWidth: 460 }}>No paperwork, no truck roll, no day off work.</p>
          <div style={{ marginTop: 28 }}>
            <Tag kind="good" icon="check">Email address</Tag>{' '}
            <Tag kind="good" icon="check">A recent bill (optional)</Tag>{' '}
            <Tag kind="good" icon="check">Switch in minutes</Tag>
          </div>
        </div>
        <div className="steps">
          {HOW.map((s, i) => (
            <div className="step" key={i}>
              <div className="n">{i + 1}</div>
              <div><h5>{s.t}</h5><p>{s.d}</p></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const QUOTES = [
  { q: 'Switched in an afternoon and my first month was $24 less than the same usage on my old plan. No catch I could find.', n: 'Priya', loc: 'Marrickville, NSW', i: 'P' },
  { q: 'Finally a retailer that says out loud what the rest won\'t: I shouldn\'t be subsidising the houses with panels. Refreshing.', n: 'Daniel', loc: 'Coorparoo, QLD', i: 'D' },
  { q: 'The app shows yesterday\'s usage by the half hour. I moved the dishwasher to off-peak and watched the bill drop.', n: 'To', loc: 'Newcastle, NSW', i: 'T' },
];
const Quotes = () => (
  <section className="section" style={{ background: 'var(--rng-navy-50)' }}>
    <div className="container">
      <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto' }}>
        <div className="eyebrow eyebrow-accent">From real switchers</div>
        <h2 style={{ fontSize: 'var(--fs-36)', marginTop: 14 }}>People who stopped paying the gap.</h2>
      </div>
      <div className="quotes">
        {QUOTES.map((c, i) => (
          <div className="quote" key={i}>
            <div style={{ color: 'var(--accent)', display: 'flex', gap: 2, marginBottom: 14 }}>
              {[0, 1, 2, 3, 4].map(s => <Icon key={s} n="bolt" size={16} style={{ fill: 'var(--accent)' }} />)}
            </div>
            <p>"{c.q}"</p>
            <div className="who"><div className="avatar">{c.i}</div><div><div style={{ fontWeight: 600, fontSize: 14 }}>{c.n}</div><div style={{ fontSize: 12.5, color: 'var(--fg-3)' }}>{c.loc}</div></div></div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CtaBand = ({ onNav }) => (
  <section className="ctaband section">
    <div className="container" style={{ textAlign: 'center' }}>
      <div className="eyebrow eyebrow-on-dark">Stop paying for your neighbour's panels</div>
      <h2 style={{ fontSize: 'var(--fs-64)', marginTop: 18, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.05 }}>See your price in under a minute.</h2>
      <p style={{ fontSize: 18, color: 'var(--rng-navy-100)', maxWidth: 520, margin: '18px auto 0', fontWeight: 300 }}>All we need is your address. If we can't beat what you're paying now, we'll say so.</p>
      <div style={{ marginTop: 32 }}>
        <Button variant="primary" size="lg" onClick={() => onNav('signup')}>Get started <Icon n="arrowRight" size={18} /></Button>
      </div>
    </div>
  </section>
);

const MarketingHome = ({ heroVariant, onCheck, onNav }) => (
  <div style={{ display: 'contents' }}>
    <Hero variant={heroVariant} onCheck={onCheck} onNav={onNav} />
    <Features />
    <HowItWorks />
    <Quotes />
    <CtaBand onNav={onNav} />
  </div>
);
window.MarketingHome = MarketingHome;