// Sections: Hero, Features, How, Showcase, Reviews, CTA, Footer
const { useState, useEffect } = React;

// Showcase tile with real AI-generated images
const ShowcaseTile = ({ idx, accent, label, image }) => {
  return (
    <div className="showcase-tile" style={{
      position: "relative", aspectRatio: "9/16", borderRadius: 20, overflow: "hidden",
      background: "#0a0a14",
      cursor: "pointer",
    }}>
      <img src={image} alt={label} style={{
        position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
      }} />
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, padding: 14,
        background: "linear-gradient(180deg, transparent, rgba(0,0,0,.7))",
        color: "#fff",
      }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
      </div>
      <div className="play-overlay" style={{
        position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
        opacity: 0, transition: "opacity .25s",
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 28,
          background: "rgba(255,255,255,.95)", color: accent,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}><Icon name="play" size={24} color={accent} /></div>
      </div>
    </div>
  );
};
window.ShowcaseTile = ShowcaseTile;

const HeroSplit = ({ t, accent }) => (
  <section className="hero hero-split" id="top">
    <div className="container hero-split__inner">
      <div className="hero-split__copy" data-aos="fade-right">
        <h1 className="display">
          {t.hero.title_1}<br/>
          <span className="grad-text">{t.hero.title_2}</span><br/>
          {t.hero.title_3}
        </h1>
        <p className="lede">{t.hero.sub}</p>
        <div className="hero-stores">
          <StoreBadge store="apple" />
          <StoreBadge store="google" />
        </div>
        <div className="hero-stats">
          <div><strong>{t.hero.stat1}</strong><span>{t.hero.stat1l}</span></div>
          <div><strong>{t.hero.stat2}★</strong><span>{t.hero.stat2l}</span></div>
          <div><strong>{t.hero.stat3}</strong><span>{t.hero.stat3l}</span></div>
        </div>
      </div>
      <div className="hero-split__phone" data-aos="fade-left" data-aos-delay="200">
        <PhoneMockup
          accent={accent}
          images={[
            { type: "placeholder", kind: "generate" },
            { type: "placeholder", kind: "result", label: "Cinematic Portrait" },
            { type: "placeholder", kind: "upload" },
          ]}
        />
      </div>
    </div>
  </section>
);
window.HeroSplit = HeroSplit;



const Features = ({ t, accent }) => {
  const items = [
    { i: "sparkle", t: t.features.f1_t, d: t.features.f1_d },
    { i: "portrait", t: t.features.f2_t, d: t.features.f2_d },
    { i: "template", t: t.features.f3_t, d: t.features.f3_d },
    { i: "crown", t: t.features.f4_t, d: t.features.f4_d },
  ];
  return (
    <section id="features" className="section">
      <div className="container">
        <div className="section-head" data-aos="fade-up">
          <div className="eyebrow">{t.features.eyebrow}</div>
          <h2 className="h2">{t.features.title}</h2>
          <p className="section-sub">{t.features.sub}</p>
        </div>
        <div className="features-grid">
          {items.map((it, i) => (
            <div key={i} className="feature-card" data-aos="fade-up" data-aos-delay={(i % 3) * 100}>
              <div className="feature-icon" style={{
                background: `linear-gradient(135deg, ${accent}30, ${accent}10)`,
                color: accent,
              }}>
                <Icon name={it.i} size={24} />
              </div>
              <div className="feature-title">{it.t}</div>
              <div className="feature-desc">{it.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Features = Features;

const HowItWorks = ({ t, accent }) => {
  const steps = [
    { t: t.how.s1_t, d: t.how.s1_d },
    { t: t.how.s2_t, d: t.how.s2_d },
    { t: t.how.s3_t, d: t.how.s3_d },
  ];
  return (
    <section id="how" className="section section--alt">
      <div className="container">
        <div className="section-head" data-aos="fade-up">
          <div className="eyebrow">{t.how.eyebrow}</div>
          <h2 className="h2">{t.how.title}</h2>
        </div>
        <div className="how-grid">
          {steps.map((s, i) => (
            <div key={i} className="how-step" data-aos="fade-up" data-aos-delay={i * 150}>
              <div className="how-num" style={{ color: accent }}>0{i + 1}</div>
              <div className="how-step-title">{s.t}</div>
              <div className="how-step-desc">{s.d}</div>
              {i < 2 && <div className="how-connector" aria-hidden />}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.HowItWorks = HowItWorks;

const Showcase = ({ t, accent }) => {
  const items = [
    { label: "Cinematic Glow", image: "assets/showcase-1.png" },
    { label: "Neon Tokyo", image: "assets/showcase-2.png" },
    { label: "Vintage Reel", image: "assets/showcase-3.png" },
  ];
  return (
    <section id="showcase" className="section">
      <div className="container">
        <div className="section-head" data-aos="fade-up">
          <div className="eyebrow">{t.showcase.eyebrow}</div>
          <h2 className="h2">{t.showcase.title}</h2>
          <p className="section-sub">{t.showcase.sub}</p>
        </div>
        <div className="showcase-grid">
          {items.map((item, i) => (
            <div key={i} data-aos="fade-up" data-aos-delay={i * 100}>
              <ShowcaseTile idx={i} accent={accent} label={item.label} image={item.image} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Showcase = Showcase;

const Reviews = ({ t, accent }) => {
  const reviews = [
    { txt: t.reviews.r1, n: t.reviews.r1n, r: t.reviews.r1r },
    { txt: t.reviews.r2, n: t.reviews.r2n, r: t.reviews.r2r },
    { txt: t.reviews.r3, n: t.reviews.r3n, r: t.reviews.r3r },
    { txt: t.reviews.r4, n: t.reviews.r4n, r: t.reviews.r4r },
  ];
  return (
    <section id="reviews" className="section section--alt">
      <div className="container">
        <div className="section-head" data-aos="fade-up">
          <div className="eyebrow">{t.reviews.eyebrow}</div>
          <h2 className="h2">{t.reviews.title}</h2>
        </div>
        <div className="reviews-grid">
          {reviews.map((r, i) => (
            <div key={i} className="review-card" data-aos="fade-up" data-aos-delay={(i % 2) * 150}>
              <div className="review-stars" style={{ color: accent }}>★★★★★</div>
              <div className="review-text">"{r.txt}"</div>
              <div className="review-meta">
                <div className="review-avatar" style={{
                  background: `linear-gradient(135deg, ${accent}, #5b3aa8)`,
                }}>{r.n[0]}</div>
                <div>
                  <div className="review-name">{r.n}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Reviews = Reviews;

const FinalCTA = ({ t, accent }) => (
  <section id="download" className="section section--cta">
    <div className="container">
      <div className="cta-card" data-aos="zoom-in" data-aos-duration="1000">
        <div className="cta-bg" style={{
          background: `radial-gradient(60% 80% at 50% 100%, ${accent}, transparent 70%)`,
        }} />
        <h2 className="h2 cta-title">{t.cta.title}</h2>
        <p className="cta-sub">{t.cta.sub}</p>
        <div className="hero-stores hero-stores--center">
          <StoreBadge store="apple" />
          <StoreBadge store="google" />
        </div>
        <div className="cta-note">{t.cta.note}</div>
      </div>
    </div>
  </section>
);
window.FinalCTA = FinalCTA;

const Footer = ({ t }) => (
  <footer className="footer">
    <div className="container footer-inner">
      <div className="footer-brand">
        <Logo size={42} />
        <p className="footer-tagline">{t.footer.tagline}</p>
      </div>
      <div className="footer-cols">
        <div>
          <div className="footer-title">{t.footer.product}</div>
          <a href="#features">{t.footer.l_features}</a>
          <a href="#download">{t.footer.l_download}</a>
        </div>
        <div>
          <div className="footer-title">{t.footer.legal}</div>
          <a href="#" onClick={(e) => e.preventDefault()}>{t.footer.l_privacy}</a>
          <a href="#" onClick={(e) => e.preventDefault()}>{t.footer.l_terms}</a>
          <a href="#" onClick={(e) => e.preventDefault()}>{t.footer.l_contact}</a>
        </div>
      </div>
    </div>
    <div className="footer-bottom container">{t.footer.copy}</div>
  </footer>
);
window.Footer = Footer;