/* ABOUT: brand / story page. Calm, low-density, editorial.
   Uses the site's shared tokens (var(--font-*), var(--ink/graphite/paper/canvas))
   so type and colour follow light/dark mode like every other page.
   Brand is always written "ViZO" (capital V, lowercase i, capital Z, capital O);
   eyebrow labels disable text-transform on the word so CSS uppercasing keeps it. */

/* Shared style fragments (match the rest of the site). */
const ABOUT_H2 = {
  fontFamily: 'var(--font-display)', fontWeight: 400,
  fontSize: 'clamp(32px, 5.2vw, 56px)', lineHeight: 1.06, letterSpacing: '-0.03em',
  color: 'var(--ink)', margin: 0, maxWidth: '18ch'
};
const ABOUT_BODY = {
  fontFamily: 'var(--font-sans)', fontSize: 'clamp(16px, 1.2vw, 19px)',
  lineHeight: 1.7, color: 'var(--graphite)', maxWidth: '46ch'
};

/* Brand-safe eyebrow text: keeps the lowercase "i" in ViZO under uppercasing. */
function ViZO() { return <span style={{ textTransform: 'none' }}>ViZO</span>; }

/* 4:5 portrait image frame (lazy-loaded). */
function AboutImage({ src }) {
  return (
    <div style={{ aspectRatio: '4 / 5', overflow: 'hidden', background: 'var(--bone)' }}>
      <img src={src} alt="" loading="lazy"
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </div>);
}

/* ---------------- 1. Hero ---------------- */
function AboutHero() {
  return (
    <section style={{ background: 'var(--paper)', padding: 'clamp(88px, 13vw, 168px) var(--pad-x) clamp(48px, 7vw, 96px)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Eyebrow>About <ViZO /></Eyebrow>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 'clamp(40px, 6.4vw, 88px)', lineHeight: 1.04, letterSpacing: '-0.04em',
          color: 'var(--ink)', margin: '24px 0 0', maxWidth: '20ch'
        }}>
          Studio-quality imagery, <em style={{ fontStyle: 'italic', fontWeight: 400 }}>within reach</em> of every brand.
        </h1>
        <p style={{
          marginTop: 'clamp(22px, 3vw, 32px)', fontFamily: 'var(--font-sans)',
          fontSize: 'clamp(17px, 1.5vw, 21px)', lineHeight: 1.6, color: 'var(--graphite)', maxWidth: '52ch'
        }}>
          We're putting a full creative studio in the hands of the brands who could never afford one.
        </p>
      </div>
    </section>);
}

/* ---------------- 2. Story one (text left, image right) ---------------- */
function AboutStoryOne() {
  const { isMobile } = useBreakpoint();
  return (
    <section style={{ background: 'var(--canvas)', padding: 'var(--pad-y) var(--pad-x)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 0.82fr', gap: 'clamp(32px, 6vw, 88px)', alignItems: 'center' }}>
        <div>
          <Eyebrow>The inspiration behind <ViZO /></Eyebrow>
          <h2 style={{ ...ABOUT_H2, margin: '20px 0 0' }}>Great imagery shouldn't be a luxury.</h2>
          <p style={{ ...ABOUT_BODY, marginTop: 28 }}>
            Fashion photography has always been expensive. A single shoot means models, studios, photographers, locations and weeks of waiting, costs that quietly lock out the smaller brands with the best ideas.
          </p>
          <p style={{ ...ABOUT_BODY, marginTop: 20 }}>
            ViZO began as a simple question: what if any brand could create studio-quality fashion imagery without the studio? What if the barrier wasn't budget, but imagination?
          </p>
        </div>
        <AboutImage src="assets/about-story-1.jpg" />
      </div>
    </section>);
}

/* ---------------- 3. Story two (image left, text right) ---------------- */
function AboutStoryTwo() {
  const { isMobile } = useBreakpoint();
  return (
    <section style={{ background: 'var(--paper)', padding: 'var(--pad-y) var(--pad-x)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.82fr 1fr', gap: 'clamp(32px, 6vw, 88px)', alignItems: 'center' }}>
        {/* image: left on desktop, below the text on mobile */}
        <div style={{ order: isMobile ? 2 : 0 }}>
          <AboutImage src="assets/about-story-2.jpg" />
        </div>
        <div style={{ order: isMobile ? 1 : 0 }}>
          <Eyebrow>Our aim</Eyebrow>
          <h2 style={{ ...ABOUT_H2, margin: '20px 0 0' }}>A full studio, in minutes.</h2>
          <p style={{ ...ABOUT_BODY, marginTop: 28 }}>
            Our aim is to put a complete creative studio in reach of every brand. Upload a product, choose a model and a setting, and get campaign-ready images, and now video, in minutes, not months. No reshoots, no compromise on quality, full creative control kept in your hands.
          </p>
          <p style={{ ...ABOUT_BODY, marginTop: 20 }}>
            We want the brands who've never been able to afford a photoshoot to look every bit as good as the ones who can. That's the whole point.
          </p>
        </div>
      </div>
    </section>);
}

/* ---------------- 4. AI statement (centred) ---------------- */
function AboutAIStatement() {
  return (
    <section style={{ background: 'var(--canvas)', padding: 'clamp(88px, 13vw, 168px) var(--pad-x)', textAlign: 'center' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(34px, 5.6vw, 60px)', lineHeight: 1.08, letterSpacing: '-0.03em',
          color: 'var(--ink)', margin: 0
        }}>
          Generated. <em style={{ fontStyle: 'italic', fontWeight: 700 }}>Not photographed.</em>
        </h2>
        <p style={{
          margin: 'clamp(22px, 3vw, 30px) auto 0', fontFamily: 'var(--font-sans)',
          fontSize: 'clamp(19px, 2.1vw, 26px)', lineHeight: 1.7, color: 'var(--graphite)',
          maxWidth: 'min(100%, 700px)', textWrap: 'balance'
        }}>
          Every model on ViZO is entirely AI-generated. No real people, no shoots, no limits. Just your products, brought to life.
        </p>
      </div>
    </section>);
}

/* ---------------- 5. Crossfade showcase (full width, lazy, auto-loop) ----------------
   Images only start loading once the section scrolls into view, and the
   crossfade only runs while it is visible, so the page stays fast. */
function AboutShowcase() {
  const imgs = [
    'assets/about-showcase-1.jpg', 'assets/about-showcase-2.jpg', 'assets/about-showcase-3.jpg',
    'assets/about-showcase-4.jpg', 'assets/about-showcase-5.jpg', 'assets/about-showcase-6.jpg'
  ];
  const ref = React.useRef(null);
  const [load, setLoad] = React.useState(false);   // begin loading images
  const [inView, setInView] = React.useState(false); // run the crossfade
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { setLoad(true); setInView(true); }
        else { setInView(false); }
      });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (!inView) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % imgs.length), 4200);
    return () => clearInterval(t);
  }, [inView]);

  return (
    <section ref={ref} aria-hidden="true" style={{
      position: 'relative', width: '100%', height: 'clamp(420px, 70vh, 860px)',
      overflow: 'hidden', background: 'var(--bone)'
    }}>
      {load && imgs.map((src, i) =>
        <img key={src} src={src} alt="" loading="lazy" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          opacity: i === idx ? 1 : 0, transition: 'opacity 1200ms ease-in-out'
        }} />
      )}
    </section>);
}

/* ---------------- 6. Closing CTA (centred) ---------------- */
function AboutCTA() {
  return (
    <section style={{ background: 'var(--paper)', padding: 'clamp(88px, 13vw, 168px) var(--pad-x)', textAlign: 'center' }}>
      <div style={{ maxWidth: 720, margin: '0 auto' }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(34px, 5.6vw, 60px)', lineHeight: 1.06, letterSpacing: '-0.03em',
          color: 'var(--ink)', margin: 0
        }}>
          See what your brand could look like.
        </h2>
        <div style={{ marginTop: 'clamp(28px, 4vw, 40px)', display: 'flex', justifyContent: 'center' }}>
          <Button variant="primary" size="large" arrow onClick={() => { window.location.href = 'https://app.vizostudio.ai'; }}>Start free trial</Button>
        </div>
      </div>
    </section>);
}

/* ---------------- Page ---------------- */
function AboutPage() {
  React.useEffect(() => {
    const prev = document.title;
    document.title = 'About — ViZO Studio';
    window.scrollTo({ top: 0, behavior: 'instant' });
    return () => { document.title = prev; };
  }, []);
  return (
    <div data-screen-label="About">
      <AboutHero />
      <AboutStoryOne />
      <AboutStoryTwo />
      <AboutAIStatement />
      <AboutShowcase />
      <AboutCTA />
    </div>);
}

Object.assign(window, { AboutPage });