// about.jsx — The mission. Problem → why now → mission → product.

/* eslint-disable react/prop-types */

function StoryRow({ step, kicker, h, children }) {
  return (
    <div className="story-row">
      <div className="story-label">
        <span className="story-step">{step}</span>
        <span className="story-kicker">{kicker}</span>
      </div>
      <div className="story-body">
        <h2 className="story-h">{h}</h2>
        {children}
      </div>
    </div>
  );
}

function AboutApp() {
  const [theme, setTheme] = useTheme();
  return (
    <>
      <Header theme={theme} setTheme={setTheme} active="about" />
      <main>
        {/* intro */}
        <section className="page-intro">
          <div className="page-intro-glow" aria-hidden="true" />
          <div className="container">
            <div className="page-intro-inner">
              <span className="eyebrow">About</span>
              <h1 className="page-title">
                Storytelling is <span className="serif-italic">supply constrained.</span>
              </h1>
              <p className="page-lead">
                Every performance team needs more creative videos than it can possibly make. Prexi exists to close that gap, without handing the work to a template.
              </p>
            </div>
          </div>
        </section>

        {/* problem + why now */}
        <section className="section-tight">
          <div className="container">
            <div className="story">
              <StoryRow step="01" kicker="The problem" h="More video than any team can make.">
                <p className="story-p">
                  There are always more ideas and briefs than video production can handle. The bottleneck isn't strategy or spend. It sits squarely at the production stage.
                </p>
                <p className="story-p">
                  And video is the slowest thing a brand team makes. Briefs, footage, edits, captions, resizes, exports. Every winning idea waits in a queue behind the work of making it.
                </p>
              </StoryRow>

              <StoryRow step="02" kicker="Why now" h={<>Generation got good. <span className="serif-italic">Taste didn't get cheaper.</span></>}>
                <p className="story-p">
                  AI can finally produce usable video. But generic generators produce generic output: off-brand, off-voice, the kind of thing a good marketer would never ship.
                </p>
                <p className="story-p">
                  The unlock isn't another generator. It's an agent that learns how your team already works, from your briefs to your brand to your past winners, and does the production grind in your house style.
                </p>
              </StoryRow>
            </div>
          </div>
        </section>

        {/* product + CTA */}
        <section className="section">
          <div className="container">
            <div className="final-card">
              <div className="final-bg" aria-hidden="true" />
              <div className="final-content">
                <span className="eyebrow">The product</span>
                <h2 className="final-title">
                  The AI video agent that works <span className="serif-italic">the way your team works.</span>
                </h2>
                <p className="final-sub">
                  Not from templates. From your workflow. See it run on your footage, or talk it through with a founder.
                </p>
                <div className="final-ctas">
                  <a className="btn btn-primary" href="index.html">See how it works</a>
                  <a className="btn btn-ghost" href="book-a-call.html">
                    Talk to founder <ArrowIcon />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

Object.assign(window, { AboutApp });