function Hero({ setRoute }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-layout">
          <div className="hero-text">
            <div className="hero-badge reveal revealed">Based on familiar stories around us</div>
            <h1 className="reveal revealed reveal-delay-1">
              Scammers don't take days off.<br/>
              <span className="accent">Neither does Arthur.</span>
            </h1>
            <p className="reveal revealed reveal-delay-2">Arthur is 73. His password has been exposed 47 times. And his new girlfriend was a deepfake. He needs some help.</p>
            <div className="hero-buttons reveal revealed reveal-delay-3">
              <Button variant="primary" arrow href="#story" onClick={(e)=>{e.preventDefault(); document.getElementById('story')?.scrollIntoView({behavior:'smooth', block:'start'});}}>See Arthur's Story</Button>
              <Button variant="secondary" href="#features" onClick={(e)=>{e.preventDefault(); document.getElementById('features')?.scrollIntoView({behavior:'smooth', block:'start'});}}>How It Works</Button>
            </div>
          </div>
          <div className="hero-image reveal revealed">
            <div className="hero-image-glow"></div>
            <img src={`images/characters.png?v=${Date.now()}`} alt="Emma, Jack, Arthur" />
          </div>
        </div>
      </div>
    </section>
  );
}

function FeaturesGrid() {
  const items = [
    { icon: 'lock', title: 'Email Breach Monitoring', body: 'We automatically scan your email addresses against known data breaches every 48 hours and alert you when your credentials are exposed.', image: 'images/feature-email.png', imageAlt: 'Monitor up to 3 emails — pull down to refresh' },
    { icon: 'pin', title: 'Deepfake Detection', body: 'See a suspicious photo or video frame anywhere on your phone? Take a screenshot and share it to Protect-Me. Our AI gives you a confidence score in seconds.', image: 'images/feature-deepfake.png', imageAlt: 'Share any suspicious image for instant deepfake analysis' },
    { icon: 'warn', title: 'Scam Alerts', body: 'Friendly comic-style alerts about scams trending in your region, delivered twice a month. See what\'s coming before it arrives.', image: 'images/feature-scam.png', imageAlt: 'Comic-style scam alerts for your region' },
  ];
  return (
    <section id="features" className="features">
      <div className="container">
        <Eyebrow>How We Protect You</Eyebrow>
        <h2 className="section-title reveal revealed">Three Ways We Keep You Safe</h2>
        <p className="section-sub reveal revealed">From monitoring your email history to detecting AI-generated fakes, we cover every angle.</p>
        <div className="features-grid">
          {items.map((it, i) => (
            <div key={i} className={`feature-card reveal revealed reveal-delay-${i+1}`}>
              <div className="feature-icon"><FeatureIcon kind={it.icon} /></div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
              <div className="feature-hover feature-hover-image">
                <img src={it.image} alt={it.imageAlt} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StoryTimeline() {
  const cards = [
    { title: '47 Breaches', body: <>Arthur has been using the same email since 2003. Same password too—<em>arthur1952</em>—for everything. His daughter Emma convinced him to check it.</>, result: { kind: 'danger', inner: <><strong>47 data breaches found.</strong> LinkedIn, Adobe, Dropbox, Yahoo, MySpace… and 42 more.</> }, quote: { body: <>"But I use that password for <em>everything!</em>"</>, who: '— Arthur' } },
    { title: "Dad's Got a Girlfriend", body: <>Two weeks later, Arthur is smiling more, wearing a new shirt, buying flowers. He met someone online—"Maria," a nurse working abroad. His son Jack took a closer look.</>, result: { kind: 'warning', inner: <><strong>AI-Generated Image — Confidence: 94%</strong><br/>Inconsistent lighting, unnatural skin texture, artifact patterns detected.</> }, quote: { body: <>"So… Maria isn't real?"<br/>"The photos aren't, Dad."<br/>"Well… at least I got a nice shirt out of it."</>, who: '— Arthur, making everyone laugh' } },
    { title: 'One Step Ahead', body: <>One month later, Arthur gets a comic-style alert about romance scams in his region. He reads it, grins, and shares it with his mates at the coffee shop.</>, result: { kind: 'safe', inner: <><strong>"Ha! Not today."</strong></> }, quote: { body: <>"Have you lot checked your old emails? You won't believe what I found."</>, who: '— Arthur, now the family\'s security advocate' } },
  ];
  return (
    <section id="story" className="story">
      <div className="container">
        <Eyebrow>Arthur's Girlfriend</Eyebrow>
        <h2 className="section-title reveal revealed">Meet Arthur</h2>
        <p className="section-sub reveal revealed">A story about passwords, romance scams, and staying one step ahead.</p>
        <div className="arthur-portrait reveal revealed">
          <div className="arthur-portrait-frame">
            <img src="images/arthur.jpeg" alt="Arthur, 73, in his living room" />
          </div>
          <figcaption className="arthur-portrait-caption">
            <span className="arthur-portrait-name">Arthur, 73</span>
            <span className="arthur-portrait-role">Retired teacher · Surrey · uses the same password for everything</span>
          </figcaption>
        </div>
        <div className="story-timeline">
          {cards.map((c, i) => (
            <div key={i} className="story-card reveal revealed">
              <div className="story-number">{i + 1}</div>
              <div className="story-content">
                <h3>{c.title}</h3>
                <p>{c.body}</p>
                <div className={`story-result story-result-${c.result.kind}`}>{c.result.inner}</div>
                <div className="story-quote">{c.quote.body}<span>{c.quote.who}</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta">
      <div className="container">
        <img src="images/slogan.png" alt="One Step Ahead" className="cta-slogan reveal revealed" />
        <h2 className="reveal revealed">Stay One Step Ahead</h2>
        <p className="reveal revealed">Protect yourself and your family from data breaches, deepfakes, and scams.</p>
        <div className="cta-store-buttons reveal revealed">
          <StoreButton kind="apple" label="App Store" />
          <StoreButton kind="google" label="Google Play" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, FeaturesGrid, StoryTimeline, CTA });