/* === Homepage === */

const PILLARS = [
  { num: '01', title: 'Affordable Bills', desc: 'Every household should pay a price they can actually afford. Energy is essential infrastructure — not a luxury, and not a market experiment.', icon: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 26V10l12-6 12 6v16M9 26V14M23 26V14M14 26v-8h4v8"/></svg>
  )},
  { num: '02', title: 'Reliable Power', desc: 'Lights on. Factories running. Hospitals operating. A grid Australians can depend on, every hour of every day, in every season.', icon: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 4 L8 18 H16 L14 28 L24 14 H16 Z"/></svg>
  )},
  { num: '03', title: 'Common Sense Policy', desc: 'Decisions made on engineering and economics, not ideology. A grid planned for outcomes — affordability, reliability, jobs.', icon: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="16" cy="16" r="12"/><path d="M16 8v8l5 3"/></svg>
  )},
];

const BillCalculator = () => {
  const [state, setState] = React.useState('NSW');
  const [bill, setBill] = React.useState(2400);
  const [email, setEmail] = React.useState('');
  const benchmarks = { NSW: 1640, VIC: 1520, QLD: 1480, SA: 1780, WA: 1560, TAS: 1620, ACT: 1590, NT: 1700 };
  const overpay = Math.max(0, bill - benchmarks[state]);
  return (
    <section className="calc-wrap" data-screen-label="Bill Calculator">
      <div className="container-wide calc-grid">
        <div>
          <span className="eyebrow" style={{ color: 'var(--amber)' }}>The Bill Calculator</span>
          <h2 style={{ marginTop: 14 }}>How much are <span className="accent">you overpaying</span> for power?</h2>
          <p className="lede">Enter your state and your annual electricity bill. We'll show you what you're paying above pre-transition benchmarks — and email you a personalised result you can share.</p>
          <p style={{ fontSize: 14, opacity: 0.6, fontStyle: 'italic' }}>Benchmarks reference 2015 inflation-adjusted average residential bills.</p>
        </div>
        <div className="calc-card">
          <label>Your state</label>
          <select value={state} onChange={e => setState(e.target.value)}>
            {Object.keys(benchmarks).map(s => <option key={s} value={s}>{s}</option>)}
          </select>

          <label>Annual electricity bill</label>
          <input type="range" min="800" max="6000" step="50" value={bill} onChange={e => setBill(+e.target.value)} className="calc-slider" />
          <div className="slider-value">
            <span>$800</span>
            <strong>${bill.toLocaleString()}</strong>
            <span>$6,000</span>
          </div>

          <div className="calc-result">
            <span className="out-label">Estimated annual overpayment</span>
            <span className="out">${overpay.toLocaleString()}</span>
            <p className="note">Above the {state} pre-2015 benchmark of ${benchmarks[state].toLocaleString()}/year.</p>
          </div>

          <label>Email me my full result</label>
          <div className="calc-email">
            <input type="email" placeholder="your@email.com" value={email} onChange={e => setEmail(e.target.value)} />
            <button className="btn btn-teal">Send</button>
          </div>
        </div>
      </div>
    </section>
  );
};

const HomeNews = () => {
  const content = useContent();
  const items = (content?.news || []).slice(0, 3);
  return (
    <section className="section-pad section-paper">
      <div className="container-wide">
        <div className="section-head">
          <span className="eyebrow">In the News</span>
          <h2>The crisis is making headlines.</h2>
          <p className="lede">Coverage of Australia's energy affordability crisis from the country's leading mastheads.</p>
        </div>
        <div className="news-grid">
          {items.map((it, i) => (
            <a href="#/news" key={i} className="news-card">
              <div className="news-source">{it.src}</div>
              <div className="news-date">{it.date}</div>
              <h4>{it.head}</h4>
              <span className="more">Read more →</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

const HomeDonate = () => {
  const [amt, setAmt] = React.useState(50);
  return (
    <section className="donate-strip" data-screen-label="Home / Donate">
      <div className="donate-strip-bg">
        <img src="assets/empty-factory.png" alt="" />
      </div>
      <div className="container-wide">
        <div className="donate-strip-inner">
          <span className="eyebrow" style={{ color: 'var(--amber)' }}>Power the Campaign</span>
          <h2 style={{ marginTop: 14 }}>This fight is funded <span className="accent">by Australians</span> — not corporations.</h2>
          <p>Every dollar reaches more Australians, contacts more MPs, and builds the public mandate to put affordability first. We are purpose-built to win — but we cannot do it without you.</p>
          <div className="donate-amounts">
            {[15, 25, 50, 100].map(v => (
              <button key={v} className={`amount-btn ${amt===v?'active':''}`} onClick={() => setAmt(v)}>${v}</button>
            ))}
            <button className={`amount-btn ${amt===0?'active':''}`} onClick={() => setAmt(0)}>Other</button>
          </div>
          <a href="#/donate" className="btn btn-amber" style={{ marginTop: 12 }}>Donate ${amt || '...'} now →</a>
        </div>
      </div>
    </section>
  );
};

const Home = () => {
  const content = useContent();
  const hero = content?.hero || {};
  return (
  <main data-screen-label="Home">
    {/* Hero */}
    <section className="hero">
      <div className="hero-bg">
        <img src="assets/hero-image.png" alt="An Australian mother reads an overdue electricity bill at her kitchen table." />
        <div className="hero-overlay" />
      </div>
      <div className="container-wide hero-content">
        <span className="hero-eyebrow"><span className="pulse" />{hero.eyebrow || 'Federal Election 2028 · Cross-Party Campaign'}</span>
        <h1>{hero.headlineMain || "1 in 5 Australians can't afford"} <span className="accent">{hero.headlineAccent || 'the power bill.'}</span></h1>
        <p className="hero-sub">{hero.sub || "Sign the petition. Tell Australia's leaders to put families first — before ideology, before politics, before experiments."}</p>
        <div className="hero-ctas">
          <a href="#/petition" className="btn btn-teal">Sign the Petition →</a>
          <a href="#/donate" className="btn btn-outline-amber">Chip in</a>
        </div>
        <PetitionCounter />
      </div>
    </section>

    <SocialTicker />
    <StatBand />

    {/* The Problem two-col */}
    <section className="section-pad section-paper">
      <div className="container-wide two-col">
        <div className="problem-prose">
          <span className="eyebrow" style={{ color: 'var(--teal-dark)', marginBottom: 16, display: 'block' }}>The Problem</span>
          <p className="lead">Australia is at a breaking point.</p>
          <p>Right now, <strong>1 in 5 households is struggling to pay their power bills.</strong> Families are being forced to choose between keeping the lights on and putting food on the table.</p>
          <p>Electricity prices keep rising. Small businesses are under pressure. Manufacturers are shutting their doors. And everyday Australians are left carrying the cost.</p>
          <p>Energy policy should protect households, secure jobs, and keep our country strong — not push families into hardship or gamble with grid reliability.</p>
          <p style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, textTransform: 'uppercase', fontSize: 26, color: 'var(--ink)', lineHeight: 1.05, marginTop: 28 }}>This isn't sustainable. And it isn't fair.</p>
          <a href="#/the-problem" className="btn btn-outline-teal" style={{ marginTop: 32 }}>Read the full story →</a>
        </div>
        <div className="problem-img">
          <img src="assets/family-candlelight.png" alt="A family sits by candlelight after a power disconnection." />
          <span className="tag">Power disconnected · NSW · 2026</span>
        </div>
      </div>
    </section>

    {/* Pillars */}
    <section className="section-pad section-teal-light">
      <div className="container-wide">
        <div className="section-head">
          <span className="eyebrow">What we're calling for</span>
          <h2>One simple principle. Three urgent demands.</h2>
        </div>
        <div className="pillars">
          {PILLARS.map(p => (
            <div className="pillar" key={p.num}>
              <span className="pillar-num">{p.num} ·</span>
              <div className="pillar-icon">{p.icon}</div>
              <h3>{p.title}</h3>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <BillCalculator />

    {/* Petition CTA band */}
    <section className="cta-band" data-screen-label="Petition CTA">
      <div className="container cta-band-inner">
        <span className="eyebrow" style={{ color: 'var(--white)', opacity: 0.9 }}>Our Petition</span>
        <p className="declaration" style={{ marginTop: 20 }}>We call on Australia's leaders to prioritise affordable & reliable energy.</p>
        <PetitionCounter baseClass="hero-counter" />
        <div style={{ marginTop: 36 }}>
          <a href="#/petition" className="btn btn-amber" style={{ padding: '20px 36px', fontSize: 19 }}>Add your name →</a>
        </div>
      </div>
    </section>

    <HomeNews />
    <HomeDonate />
  </main>
  );
};

Object.assign(window, { Home });