// About page — personal, mission-driven story page.
// Standard marketing shell (Header + Footer from pageShell.jsx).

function AboutHero() {
  return (
    <section style={{ padding: "40px 72px 30px", position: "relative", overflow: "hidden", minHeight: "62vh", display: "flex", alignItems: "center" }}>
      <div aria-hidden style={{ position: "absolute", width: 620, height: 620, top: "-20%", right: "-8%", borderRadius: "50%", filter: "blur(85px)", opacity: 0.3, background: `radial-gradient(circle, ${TEAL}, transparent 70%)`, pointerEvents: "none" }} />
      <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative", width: "100%", textAlign: "center" }}>
        <h1 style={{
          fontFamily: serif,
          fontSize: "clamp(52px, 7.4vw, 112px)",
          letterSpacing: "-0.045em",
          fontWeight: 300,
          fontVariationSettings: "'opsz' 144",
          margin: 0,
          lineHeight: 0.92,
          color: INK,
          textRendering: "geometricPrecision",
        }}>
          A&nbsp;place<br />
          for helping <em style={{ fontStyle: "italic", fontWeight: 400, color: "transparent", WebkitTextStroke: `1.4px ${TEAL}` }}>shape</em> a&nbsp;lifestyle
        </h1>
        <p style={{ fontFamily: serif, fontSize: 22, fontStyle: "italic", fontWeight: 300, letterSpacing: "-0.005em", color: "rgba(242,237,228,0.82)", margin: "44px auto 0", maxWidth: 760, lineHeight: 1.55 }}>
          Your trainer already mapped out the next few weeks. Your nutritionist's plan became a grocery list before you thought to ask. When you open the workout card, the music starts — your coach picked it for that session. Shape Score watches all of it. Miss a day, it knows. Build a streak, it shows. The community isn't moderated positivity — it's people who are also mid-loop, figuring it out in real time. Nobody here is finished. That's the point.
        </p>
        {/* Connector cue down to the letter section. */}
        <div style={{ marginTop: 56, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }} aria-hidden="true">
          <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(242,237,228,0.45)" }}>A letter</span>
          <span style={{ width: 1, height: 56, background: `linear-gradient(to bottom, transparent, ${TEAL})`, display: "block" }} />
        </div>
      </div>
    </section>
  );
}

function AboutLetter() {
  const dropStyle = {
    float: "left",
    fontFamily: serif,
    fontSize: 96,
    lineHeight: 0.85,
    fontWeight: 400,
    color: TEAL,
    padding: "6px 14px 0 0",
    marginTop: 8,
  };
  const para = {
    fontFamily: serif,
    fontSize: 20,
    lineHeight: 1.75,
    color: "rgba(242,237,228,0.86)",
    margin: "0 0 28px",
  };
  const pullBase = {
    fontFamily: serif,
    fontStyle: "italic",
    fontSize: "clamp(32px, 4.4vw, 54px)",
    lineHeight: 1.12,
    letterSpacing: "-0.02em",
    fontWeight: 400,
    color: INK,
    margin: "44px 0",
    padding: "10px 0",
  };
  return (
    <section style={{ color: INK, position: "relative", padding: "80px 24px 140px" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", position: "relative" }}>
        <h2 style={{ fontFamily: serif, fontSize: "clamp(26px, 3vw, 38px)", letterSpacing: "-0.02em", fontWeight: 400, margin: "0 0 8px", lineHeight: 1.15, color: INK, textAlign: "center", fontStyle: "italic" }}>
          <em style={{ fontStyle: "italic", fontWeight: 500, color: TEAL }}>Fitness</em> is the entry point. Your <em style={{ fontStyle: "italic", fontWeight: 500, color: TEAL }}>lifestyle</em> is the goal.
        </h2>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 18, marginBottom: 48 }}>
          <span style={{ width: 24, height: 1, background: "rgba(242,237,228,0.25)" }} />
        </div>

        <p style={para}>
          <span style={dropStyle}>S</span>hape is about exactly what its name suggests — shaping your life into what you want it to be. Your routines, your sleep, what you cook, the music that moves you, how you talk to yourself on hard days, the people you spend Saturday with. We built Shape to be the place where you can work on all of it, on your own terms.
        </p>

        <p style={para}>
          It starts with a coach. Having great ones shouldn't be a luxury. Most apps replace them with chatbots; most gyms gate the good ones behind packages. We thought there was a better way: open the door for trainers, nutritionists, and registered dietitians who actually care, and make that level of guidance affordable for the rest of us.
        </p>

        <p style={para}>
          Shape builds the loop around all of it. Your trainer programs your week before you arrive — every set, every tempo, every cue loaded the night before so you're never standing at the rack wondering what's next. Your nutritionist builds a meal plan around your specific goals — whether that's hitting a macro target, managing a dietary restriction, building around a health condition, or just eating better — and that plan turns into a grocery list you can actually shop from.
        </p>

        <p style={para}>
          As you show up — day after day, workout after workout, habit after habit — your Shape Score rises with you. It tracks your consistency, rewards your effort, and reflects the status you've actually earned.
        </p>

        <aside style={{ ...pullBase, marginRight: "-80px", paddingRight: 24, borderRight: `3px solid ${TEAL}`, textAlign: "right" }}>
          Not a vanity metric. <em style={{ color: TEAL_BRIGHT }}>A mirror.</em>
        </aside>

        <p style={para}>
          There's also a place to write down what you're shaping toward — strength, sleep, calm, confidence, a marathon, a specific body composition goal, just feeling like yourself again. Structure when you need it. Discipline you build, not something handed down.
        </p>

        <p style={para}>
          And then there's the part no app gets right: <em style={{ fontStyle: "italic", color: TEAL_BRIGHT, fontWeight: 500 }}>the community</em>. You can keep your journey private — or share it. What you cooked, what your nutritionist recommended this week, what you lifted, what your coach said. Tips, recipes, nutrition advice, coaches and dietitians worth trying. A whole feed of people figuring out the same things you are.
        </p>

        <aside style={{ ...pullBase, marginLeft: "-80px", paddingLeft: 24, borderLeft: `3px solid ${TEAL}` }}>
          The community isn't a forum. It's the people in your loop.
        </aside>

        <p style={{ ...para, marginBottom: 48 }}>
          Shape is the place where you find the coach, build the habits, earn your score, hear the music, and meet the people. The rest is just showing up.
        </p>

        <div style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}>
          <span style={{ width: 24, height: 2, background: "rgba(242,237,228,0.25)" }} />
        </div>
        <div style={{ textAlign: "center", fontFamily: serif, fontStyle: "italic", fontSize: 16, color: "rgba(242,237,228,0.6)" }}>
          — The Shape team
        </div>
      </div>
    </section>
  );
}

function AboutPillars() {
  const items = [
    {
      h: "Personal coaching, lower cost",
      p: "Browse, message, and hire vetted trainers and nutritionists before you pay anything. $5/mo flat to the platform. Your coach sets their own rate and gets paid directly.",
    },
    {
      h: "A real community",
      p: "Share your week if you want to — or don't. Either way, you can find tips, recipes, recommended coaches, and people who get what you're trying to do.",
    },
    {
      h: "Shape Radio + the soundtrack",
      p: "Ad-free mixes built for movement, included with every membership. Your coach can drop a playlist onto a workout and it plays right on the card.",
    },
    {
      h: "Lifestyle, structured",
      p: "Habit tracking, grocery lists that build themselves, meal plans you actually follow, Shape Score that reads the truth at the end of the week. Build the good ones. Break the bad ones.",
    },
    {
      h: "Goals that are yours",
      p: "Tell us what you're shaping toward — strength, weight, sleep, calm, a marathon, just feeling like yourself again. We help you plan around it and your coach holds the line.",
    },
    {
      h: "Public if you want, private always",
      p: "Your data is yours. Share your progress with the community when you feel like it. Keep it locked when you don't. There's no algorithm pushing you to overshare.",
    },
  ];
  return (
    <section style={{ padding: "120px 72px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: TEAL, marginBottom: 16 }}>What you get</div>
          <h3 style={{ fontFamily: serif, fontSize: "clamp(32px, 4.4vw, 56px)", letterSpacing: "-0.03em", fontWeight: 300, fontStyle: "italic", margin: 0, lineHeight: 1.02 }}>
            One place for the <em style={{ fontStyle: "italic", fontWeight: 500, color: TEAL }}>whole loop</em>.
          </h3>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 36, rowGap: 48 }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderTop: `1px solid rgba(242,237,228,0.12)`, paddingTop: 22 }}>
              <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "0.18em", color: TEAL_BRIGHT, marginBottom: 14 }}>{String(i + 1).padStart(2, "0")}</div>
              <div style={{ fontFamily: serif, fontSize: 24, letterSpacing: "-0.015em", fontWeight: 400, fontStyle: "italic", color: INK, lineHeight: 1.18, marginBottom: 14 }}>{it.h}</div>
              <p style={{ fontFamily: serif, fontSize: 16, fontStyle: "italic", fontWeight: 300, letterSpacing: "-0.003em", color: "rgba(242,237,228,0.78)", lineHeight: 1.55, margin: 0 }}>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutCTA() {
  return (
    <section style={{ padding: "40px 72px 140px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
        <h3 style={{ fontFamily: serif, fontSize: "clamp(36px, 5vw, 64px)", letterSpacing: "-0.035em", fontWeight: 300, fontStyle: "italic", margin: 0, lineHeight: 1.0 }}>
          Come <em style={{ fontStyle: "italic", fontWeight: 600, color: TEAL }}>shape</em> with us.
        </h3>
      </div>
    </section>
  );
}

function AboutPage() {
  const [scrollFade, setScrollFade] = React.useState(0);
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        // Fade the spotlight in over the first 700px of scroll, then hold full.
        const t = Math.min(1, Math.max(0, window.scrollY / 700));
        setScrollFade(t);
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return (
    <div style={{ background: PAPER, color: INK, fontFamily: sans, minHeight: "100vh", position: "relative", overflow: "hidden" }}>
      {/* Spotlight gradient — soft cream glow that fades in as the visitor
          scrolls past the hero, so the letter section reads as "lit". */}
      <div aria-hidden style={{
        position: "fixed",
        inset: 0,
        zIndex: 0,
        background: `radial-gradient(ellipse 140% 160% at 50% 45%, rgba(242,237,228,0.12) 0%, rgba(242,237,228,0.10) 30%, rgba(242,237,228,0.07) 60%, rgba(242,237,228,0.04) 85%, rgba(242,237,228,0.02) 100%)`,
        opacity: scrollFade,
        transition: "opacity .2s ease-out",
        pointerEvents: "none",
      }} />
      {/* Paper-stock tone gradient — warm cream tint top-left, cooler shadow bottom-right.
          Layered above the spotlight so the page feels like printed stock, not flat black. */}
      <div aria-hidden style={{
        position: "fixed",
        inset: 0,
        zIndex: 0,
        pointerEvents: "none",
        background: `linear-gradient(135deg, rgba(242,237,228,0.11) 0%, rgba(242,237,228,0.05) 30%, transparent 55%, rgba(11,14,12,0.42) 100%)`,
      }} />
      {/* Horizontal masthead + footer rules — frame the page like a print spread. */}
      <div aria-hidden style={{
        position: "fixed",
        top: 96,
        left: 0,
        right: 0,
        height: 1,
        zIndex: 0,
        pointerEvents: "none",
        background: "linear-gradient(to right, transparent 0%, rgba(242,237,228,0.28) 18%, rgba(242,237,228,0.28) 82%, transparent 100%)",
      }} />
      <div aria-hidden style={{
        position: "fixed",
        bottom: 24,
        left: 0,
        right: 0,
        height: 1,
        zIndex: 0,
        pointerEvents: "none",
        background: "linear-gradient(to right, transparent 0%, rgba(242,237,228,0.28) 18%, rgba(242,237,228,0.28) 82%, transparent 100%)",
      }} />
      {/* Film grain — fine SVG noise. Dominant texture for the editorial feel. */}
      <svg aria-hidden xmlns="http://www.w3.org/2000/svg" style={{
        position: "fixed",
        inset: 0,
        zIndex: 0,
        width: "100%",
        height: "100%",
        opacity: 0.22,
        pointerEvents: "none",
        mixBlendMode: "overlay",
      }}>
        <filter id="aboutNoise">
          <feTurbulence type="fractalNoise" baseFrequency="0.78" numOctaves="3" stitchTiles="stitch" />
          <feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.75 0" />
        </filter>
        <rect width="100%" height="100%" filter="url(#aboutNoise)" />
      </svg>
      {/* Hairline column rules — faint editorial column guides. */}
      <div aria-hidden style={{
        position: "fixed",
        inset: 0,
        zIndex: 0,
        pointerEvents: "none",
        background: "repeating-linear-gradient(to right, transparent 0, transparent calc(50% - 380px), rgba(242,237,228,0.06) calc(50% - 380px), rgba(242,237,228,0.06) calc(50% - 379px), transparent calc(50% - 379px), transparent calc(50% + 379px), rgba(242,237,228,0.06) calc(50% + 379px), rgba(242,237,228,0.06) calc(50% + 380px), transparent calc(50% + 380px))",
      }} />
      {/* Printer's crop marks — small L-shaped ticks at the four corners,
          like a magazine spread proof. Quiet but unmistakably editorial. */}
      {[
        { pos: { top: 112, left: 40 },   lines: [[0,0,0,18],[0,0,18,0]] },
        { pos: { top: 112, right: 40 },  lines: [[18,0,18,18],[18,0,0,0]] },
        { pos: { bottom: 40, left: 40 }, lines: [[0,18,0,0],[0,18,18,18]] },
        { pos: { bottom: 40, right: 40 },lines: [[18,18,18,0],[18,18,0,18]] },
      ].map((c, i) => (
        <svg key={i} aria-hidden xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style={{ position: "fixed", width: 18, height: 18, zIndex: 0, pointerEvents: "none", opacity: 0.55, ...c.pos }}>
          {c.lines.map((l, j) => (
            <line key={j} x1={l[0]} y1={l[1]} x2={l[2]} y2={l[3]} stroke={TEAL_BRIGHT} strokeWidth="1" />
          ))}
        </svg>
      ))}
      {/* Side rail with periodic tick marks — like a typeset measuring rule. */}
      <svg aria-hidden xmlns="http://www.w3.org/2000/svg" style={{ position: "fixed", left: 22, top: 160, bottom: 60, width: 12, zIndex: 0, pointerEvents: "none", opacity: 0.35 }}>
        <line x1="6" y1="0" x2="6" y2="100%" stroke="rgba(242,237,228,0.45)" strokeWidth="0.6" />
        <g stroke="rgba(242,237,228,0.55)" strokeWidth="0.8">
          <line x1="0" y1="0%" x2="12" y2="0%" />
          <line x1="2" y1="20%" x2="10" y2="20%" />
          <line x1="2" y1="40%" x2="10" y2="40%" />
          <line x1="2" y1="60%" x2="10" y2="60%" />
          <line x1="2" y1="80%" x2="10" y2="80%" />
          <line x1="0" y1="100%" x2="12" y2="100%" />
        </g>
      </svg>
      <svg aria-hidden xmlns="http://www.w3.org/2000/svg" style={{ position: "fixed", right: 22, top: 160, bottom: 60, width: 12, zIndex: 0, pointerEvents: "none", opacity: 0.35 }}>
        <line x1="6" y1="0" x2="6" y2="100%" stroke="rgba(242,237,228,0.45)" strokeWidth="0.6" />
        <g stroke="rgba(242,237,228,0.55)" strokeWidth="0.8">
          <line x1="0" y1="0%" x2="12" y2="0%" />
          <line x1="2" y1="20%" x2="10" y2="20%" />
          <line x1="2" y1="40%" x2="10" y2="40%" />
          <line x1="2" y1="60%" x2="10" y2="60%" />
          <line x1="2" y1="80%" x2="10" y2="80%" />
          <line x1="0" y1="100%" x2="12" y2="100%" />
        </g>
      </svg>
      <div style={{ position: "relative", zIndex: 1 }}>
        <Header active="About" />
        <AboutHero />
        <AboutLetter />
        <Footer />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AboutPage />);
