/* eslint-disable */
/* Bee Cleaner — sections (bottom half: How, Testimonials, Pricing, Privacy, FAQ, Footer) */

// ===== How it works =====
function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Install & scan',
      desc: 'Grant photo access. Bee scans on-device — no upload, no waiting.',
      art: (
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(circle at 50% 30%, rgba(255,214,10,0.2), transparent 60%)',
          display: 'grid', placeItems: 'center'
        }}>
          <img src="assets/icon.jpg" alt="" style={{width: 100, height: 100, borderRadius: 24}}/>
        </div>
      ),
    },
    {
      n: '02',
      title: 'Review groups',
      desc: 'Swipe through stacks of similar shots. Tap to keep favourites, or trust the AI Best pick.',
      art: (
        <div style={{position: 'absolute', inset: 16, display: 'grid', placeItems: 'center'}}>
          <div className="phone sm" style={{width: 160, transform: 'scale(0.95)'}}>
            <div className="phone-notch"/>
            <div className="phone-inner"><img src="assets/similar.jpg" alt=""/></div>
          </div>
        </div>
      ),
    },
    {
      n: '03',
      title: 'Sweep it clean',
      desc: 'One tap removes everything you marked. Storage freed, no regret — Keep list protects favourites.',
      art: (
        <div style={{position: 'absolute', inset: 16, display: 'grid', placeItems: 'center'}}>
          <div className="phone sm" style={{width: 160, transform: 'scale(0.95)'}}>
            <div className="phone-notch"/>
            <div className="phone-inner"><img src="assets/congrats.jpg" alt=""/></div>
          </div>
        </div>
      ),
    },
  ];

  return (
    <section className="section" id="how" data-screen-label="05 How it works">
      <div className="container">
        <div className="section-head center">
          <div className="eyebrow"><span className="dot"/>How it works</div>
          <h2 className="h-display size-section">Three taps to a tidy phone.</h2>
          <p className="lead" style={{textAlign: 'center'}}>
            No accounts, no setup. Open Bee and you're already cleaning.
          </p>
        </div>
        <div className="steps">
          {steps.map((s) => (
            <div className="step" key={s.n}>
              <div className="step-num">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
              <div className="step-art">{s.art}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Testimonials =====
function Testimonials() {
  const reviews = [
    {
      stars: 5,
      quote: "Freed 42 GB the first night. I'd been carrying around three years of duplicate sunsets.",
      name: 'Marcus T.',
      where: 'Beta tester · United States',
    },
    {
      stars: 5,
      quote: "The compress slider is brilliant — I get to see what I'm losing before I lose it. No other cleaner does that.",
      name: 'Sophie L.',
      where: 'Beta tester · United Kingdom',
    },
    {
      stars: 5,
      quote: "I've tried five cleaners. This is the only one that actually feels native. The bee is adorable too.",
      name: 'Daniel K.',
      where: 'Beta tester · Germany',
    },
    {
      stars: 5,
      quote: "Finally I can find a contact without scrolling past four versions of Mum.",
      name: 'Priya R.',
      where: 'Beta tester · India',
    },
    {
      stars: 5,
      quote: "On-device scanning was the deciding factor. My photos never leave my phone.",
      name: 'Léa M.',
      where: 'Beta tester · France',
    },
    {
      stars: 5,
      quote: "The video compression alone is worth it — I freed up a ton without losing quality.",
      name: 'James O.',
      where: 'Beta tester · Australia',
    },
  ];

  return (
    <section className="section" data-screen-label="06 Testimonials">
      <div className="container">
        <div className="section-head center">
          <div className="eyebrow"><span className="dot"/>From our beta testers</div>
          <h2 className="h-display size-section">A clean phone. A calm mind.</h2>
        </div>
        <div className="testimonials">
          {reviews.map((r, i) => (
            <div className="testimonial" key={i}>
              <div className="testimonial-stars">★★★★★</div>
              <p className="testimonial-quote">"{r.quote}"</p>
              <div className="testimonial-meta">
                <div className="testimonial-avatar">{r.name[0]}</div>
                <div>
                  <strong>{r.name}</strong>
                  <span>{r.where}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Pricing =====
function Pricing() {
  return (
    <section className="section" id="pricing" data-screen-label="07 Pricing">
      <div className="container">
        <div className="section-head center">
          <div className="eyebrow"><span className="dot"/>Pricing</div>
          <h2 className="h-display size-section">Try it free for 3 days.</h2>
          <p className="lead" style={{textAlign: 'center'}}>
            Most users free up more than the price of premium in the first scan.
          </p>
        </div>
        <div className="pricing">
          <div className="plan">
            <div className="plan-name">Free</div>
            <div className="plan-price">$0<small> / forever</small></div>
            <div className="plan-desc">Get started without paying a cent.</div>
            <ul>
              <li><Icon.Check/> <span>Scan and review duplicates</span></li>
              <li><Icon.Check/> <span>See Similar / Live / Screenshots</span></li>
              <li><Icon.Check/> <span>Up to 3 cleanups / day</span></li>
              <li className="dim"><Icon.Check/> <span>Video compression</span></li>
              <li className="dim"><Icon.Check/> <span>Contacts cleanup</span></li>
              <li className="dim"><Icon.Check/> <span>Smart reminders</span></li>
            </ul>
            <a href={window.STORE_URL} target="_blank" rel="noopener" className="btn btn-ghost btn-lg">Get the app</a>
          </div>

          <div className="plan featured">
            <div className="plan-tag">3-DAY FREE TRIAL</div>
            <div className="plan-name"><span className="honey-text">Premium</span> · Weekly</div>
            <div className="plan-price">$9.99<small> / week</small></div>
            <div className="plan-desc">3 days free, then $9.99 / week. Cancel anytime.</div>
            <ul>
              <li><Icon.Check/> <span>Everything in Free</span></li>
              <li><Icon.Check/> <span>Unlimited cleanups</span></li>
              <li><Icon.Check/> <span>Video compression (up to 90%)</span></li>
              <li><Icon.Check/> <span>Contacts cleanup & merge</span></li>
              <li><Icon.Check/> <span>Smart cleaning reminders</span></li>
              <li><Icon.Check/> <span>Home-screen widgets</span></li>
              <li><Icon.Check/> <span>No ads, ever</span></li>
            </ul>
            <a href={window.STORE_URL} target="_blank" rel="noopener" className="btn btn-primary btn-lg">Start free trial</a>
          </div>

          <div className="plan">
            <div className="plan-tag plan-tag-muted">BEST VALUE</div>
            <div className="plan-name"><span className="honey-text">Premium</span> · Yearly</div>
            <div className="plan-price">$49.99<small> / year</small></div>
            <div className="plan-desc">Just ~$0.96 / week, billed annually.</div>
            <ul>
              <li><Icon.Check/> <span>Everything in Free</span></li>
              <li><Icon.Check/> <span>Unlimited cleanups</span></li>
              <li><Icon.Check/> <span>Video compression (up to 90%)</span></li>
              <li><Icon.Check/> <span>Contacts cleanup & merge</span></li>
              <li><Icon.Check/> <span>Smart cleaning reminders</span></li>
              <li><Icon.Check/> <span>Home-screen widgets</span></li>
              <li><Icon.Check/> <span>No ads, ever</span></li>
            </ul>
            <a href={window.STORE_URL} target="_blank" rel="noopener" className="btn btn-ghost btn-lg">Get yearly</a>
          </div>
        </div>
        <p className="muted" style={{textAlign: 'center', marginTop: 32, fontSize: 13}}>
          Prices shown in USD and may vary by region. The 3-day free trial applies to the weekly plan.
          Cancel anytime in App Store settings. Subscription auto-renews unless cancelled at least 24 hours before the end of the current period.
        </p>
      </div>
    </section>
  );
}

// ===== Privacy =====
function Privacy() {
  const points = [
    {
      icon: <Icon.Lock/>,
      title: 'Everything on-device',
      desc: 'Your photos, contacts and videos never leave your iPhone. No uploads, no servers, no exceptions.',
    },
    {
      icon: <Icon.NoCloud/>,
      title: 'No accounts required',
      desc: "We don't ask for email, name or any personal information to use the app.",
    },
    {
      icon: <Icon.Shield/>,
      title: 'Trash-first deletes',
      desc: 'Removed photos go to your Recently Deleted album — recoverable for 30 days, then gone for good.',
    },
    {
      icon: <Icon.Heart/>,
      title: 'Keep list always wins',
      desc: 'Marked a photo as Keep? Bee will never suggest it for deletion, no matter how many duplicates.',
    },
  ];
  return (
    <section className="section" data-screen-label="08 Privacy">
      <div className="container">
        <div className="privacy-grid">
          <div>
            <div className="eyebrow"><span className="dot"/>Privacy</div>
            <h2 className="h-display size-section" style={{marginTop: 18, marginBottom: 18}}>
              Your photos stay<br/>on your phone.
            </h2>
            <p className="lead" style={{marginBottom: 40}}>
              Cleaning your phone shouldn't mean trusting a stranger with your memories. Bee runs
              entirely on-device — the way it should be.
            </p>
            <div className="privacy-points">
              {points.map((p, i) => (
                <div className="privacy-point" key={i}>
                  <div className="pp-icon">{p.icon}</div>
                  <div>
                    <h5>{p.title}</h5>
                    <p>{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="privacy-visual">
            <img src="assets/bee-heart-opt.png" className="privacy-shield" alt=""/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== FAQ =====
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: 'Will Bee Cleaner delete photos by accident?',
      a: "No. Bee never deletes anything without your tap. And every removal goes to Recently Deleted — you have 30 days to recover anything you change your mind about.",
    },
    {
      q: 'Do my photos leave my phone?',
      a: "Never. All scanning, grouping and compression happens locally on your device. We have no servers to send your data to.",
    },
    {
      q: 'How does Bee decide which photo is "best"?',
      a: "On-device AI looks at sharpness, faces (eyes open, smiles), composition and exposure to pick the strongest shot in each group. You can always override the pick.",
    },
    {
      q: 'Does it work with iCloud Photos?',
      a: "Yes. Bee uses Apple's Photos framework, so iCloud-stored items are scanned just like local ones. Cleaning frees space everywhere they exist.",
    },
    {
      q: 'How much can I really save?',
      a: "Average first-time user frees 22 GB. Photo-heavy users have reported 80+ GB. Try the free scan — the size estimate appears before you commit to anything.",
    },
    {
      q: "What's the difference between Free and Premium?",
      a: "Free lets you scan and clean duplicates. Premium unlocks video compression, contacts merging, smart reminders, widgets, and removes all ads + cleanup limits.",
    },
    {
      q: 'Can I cancel anytime?',
      a: "Yes. Premium is managed through your Apple ID. Cancel in App Store settings any time before the trial ends and you won't be charged.",
    },
  ];
  return (
    <section className="section" id="faq" data-screen-label="09 FAQ">
      <div className="container">
        <div className="section-head center">
          <div className="eyebrow"><span className="dot"/>FAQ</div>
          <h2 className="h-display size-section">Questions, answered.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-icon"><Icon.Plus/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Final CTA =====
function FinalCTA() {
  return (
    <section className="section" id="download" data-screen-label="10 Final CTA">
      <div className="container">
        <div className="final-cta">
          <img src="assets/bee-cape-opt.png" className="final-cta-bee" alt=""/>
          <div className="eyebrow" style={{justifyContent: 'center'}}>
            <span className="dot"/>3-day free trial
          </div>
          <h2 style={{marginTop: 18}}>
            Free up your<br/><span className="honey-text">first 10 GB</span> today.
          </h2>
          <p>
            The average scan finds 22 GB in under a minute. Yours is one tap away.
          </p>
          <div className="final-cta-buttons">
            <a href={window.STORE_URL} target="_blank" rel="noopener" className="appstore honey">
              <span className="as-icon"><Icon.Apple/></span>
              <span className="as-text">
                <small>Download on the</small>
                <strong>App Store</strong>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer" data-screen-label="11 Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/icon.jpg" alt=""/>
            <div style={{fontWeight: 700, fontSize: 17, marginBottom: 10}}>Bee Cleaner</div>
            <p>AI-powered cleanup for your iPhone. On-device, private, and a little bit magical.</p>
          </div>
          <div className="footer-col">
            <h6>Product</h6>
            <ul>
              <li><a href="#features">Features</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>Legal</h6>
            <ul>
              <li><a href="privacy.html">Privacy Policy</a></li>
              <li><a href="terms.html">Terms of Use</a></li>
              <li><a href="mailto:support@teralix.info">Support</a></li>
              <li><a href="mailto:support@teralix.info">support@teralix.info</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Bee Cleaner. Crafted on-device.</span>
          <span>Made for iPhone · iOS 16+</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { HowItWorks, Testimonials, Pricing, Privacy, FAQ, FinalCTA, Footer });