/* global React */
const { useState } = React;

function SectionHead({ num, eyebrow, title, lede }) {
  return (
    <div className="sec-head">
      <div>
        <div className="sec-eyebrow"><span className="num">{num}</span> {eyebrow}</div>
        <h2 className="sec-title">{title}</h2>
      </div>
      <p className="sec-lede">{lede}</p>
    </div>
  );
}

function WhatIs() {
  return (
    <section className="sec" id="what">
      <div className="wrap">
        <SectionHead
          num="01"
          eyebrow="What is a digital story"
          title="A short film that argues its own meaning."
          lede="A digital story is a 2–5 minute multimedia piece that pairs a first-person narrative with images, motion, and sound. Think: a personal essay that earns the word 'show.' It isn't a vlog, a lecture recording, or a slideshow with narration — it's composed, written, and scored."
        />

        <div className="def">
          <div className="def-q">Working definition</div>
          <div className="def-a">
            A digital story is a <b>short, authored, multimedia narrative</b> built from personal voice, still and moving images, music, and editing — designed to make a point felt, not just understood.
          </div>
          <div className="def-meta">
            <div><div className="k">Length</div><div className="v">90 seconds – 5 minutes</div></div>
            <div><div className="k">Voice</div><div className="v">First-person, past tense</div></div>
            <div><div className="k">Goal</div><div className="v">One emotional shift in the viewer</div></div>
          </div>
        </div>

        <div style={{marginTop: 28}} className="cols-3">
          <div className="card">
            <div className="num-big">01</div>
            <h4 className="card-title">It argues something</h4>
            <p className="card-body">Every digital story is an argument wearing a narrative costume. "This changed me," "this matters," "this is what I saw." If a stranger can't name the argument after one viewing, you're still drafting.</p>
          </div>
          <div className="card">
            <div className="num-big">02</div>
            <h4 className="card-title">It's authored, not recorded</h4>
            <p className="card-body">A digital story is edited — sequenced, trimmed, sound-designed. The raw material is real; the piece is composed. Students often need help crossing from "I filmed it" to "I shaped it."</p>
          </div>
          <div className="card">
            <div className="num-big">03</div>
            <h4 className="card-title">It's designed for one viewing</h4>
            <p className="card-body">Unlike an essay, a reader can't re-read a line. Every transition, cut, and emphasis has to do its work live. That constraint is the craft.</p>
          </div>
        </div>

        <div className="pull">
          The shortest definition I use with students: <em>a digital story is a voice that sounds like yours, over images that prove it.</em>
        </div>
      </div>
    </section>
  );
}

function Structure() {
  const points = [
    { x: 6, y: 80, lbl: "Hook", sub: "0:00–0:15" },
    { x: 24, y: 62, lbl: "Setup", sub: "0:15–0:45" },
    { x: 44, y: 40, lbl: "Turn", sub: "0:45–1:30" },
    { x: 64, y: 18, lbl: "Crisis", sub: "1:30–2:30" },
    { x: 82, y: 36, lbl: "Resolution", sub: "2:30–3:30" },
    { x: 96, y: 58, lbl: "Coda", sub: "3:30–end" },
  ];
  return (
    <section className="sec" id="structure">
      <div className="wrap">
        <SectionHead
          num="02"
          eyebrow="Story structure"
          title="Shape before sentences."
          lede="Before a student writes a word, they should be able to draw the shape of the piece. Six points, no more. If the shape is wrong, the script will drag — and no edit can save dragging."
        />

        <div className="arc">
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8}}>
            <div style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.08em"}}>Tension →</div>
            <div style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.08em"}}>3:30 runtime</div>
          </div>
          <div className="arc-stage">
            <svg className="arc-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
              <defs>
                <linearGradient id="arcg" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.35"/>
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M 6 80 Q 16 68, 24 62 T 44 40 T 64 18 T 82 36 T 96 58 L 96 100 L 6 100 Z" fill="url(#arcg)"/>
              <path d="M 6 80 Q 16 68, 24 62 T 44 40 T 64 18 T 82 36 T 96 58" fill="none" stroke="var(--accent)" strokeWidth="0.8" vectorEffect="non-scaling-stroke"/>
            </svg>
            {points.map((p, i) => (
              <div key={i} className="arc-pt" style={{left: `${p.x}%`, top: `${p.y}%`}}>
                <span className="arc-dot" />
                <span className="lbl">{p.lbl}</span>
                <span className="sub">{p.sub}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{marginTop: 28}} className="cols-2">
          <div className="card">
            <h4 className="card-title">The three non-negotiables</h4>
            <ul style={{margin: 0, paddingLeft: 18, color: "var(--ink-dim)", fontSize: 14, lineHeight: 1.7}}>
              <li><b style={{color: "var(--ink)"}}>A narrator with skin in the game.</b> The "I" in the piece must have something at risk.</li>
              <li><b style={{color: "var(--ink)"}}>A specific moment.</b> Not "my childhood," but "the afternoon my grandfather handed me the keys."</li>
              <li><b style={{color: "var(--ink)"}}>A shift.</b> The narrator at the end understands something they didn't at the start.</li>
            </ul>
          </div>
          <div className="card">
            <h4 className="card-title">Common structural traps</h4>
            <ul style={{margin: 0, paddingLeft: 18, color: "var(--ink-dim)", fontSize: 14, lineHeight: 1.7}}>
              <li><b style={{color: "var(--ink)"}}>Front-loaded context.</b> Two minutes of backstory before anything happens. Cut it.</li>
              <li><b style={{color: "var(--ink)"}}>No turn.</b> Everything is level-toned. A digital story needs a pivot in the middle third.</li>
              <li><b style={{color: "var(--ink)"}}>False resolution.</b> Tying a bow on something the piece hasn't earned. Coda, not closure.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Script() {
  return (
    <section className="sec" id="script">
      <div className="wrap">
        <SectionHead
          num="03"
          eyebrow="Scripting &amp; storyboarding"
          title="Write it to be spoken. Draw it to be shot."
          lede="The script is written for the ear; the storyboard is written for the eye. Keep them in sync by drafting both on the same page — a two-column document where every line of narration has a matching shot."
        />
        <div className="cols-2">
          <div className="card">
            <h4 className="card-title">Scripting rules of thumb</h4>
            <ul style={{margin: 0, paddingLeft: 18, color: "var(--ink-dim)", fontSize: 14, lineHeight: 1.7}}>
              <li>Write in the voice you'd use telling a friend at dinner.</li>
              <li>150 words per minute read aloud — that's your runtime budget.</li>
              <li>Short sentences. Then longer ones. Then a short one.</li>
              <li>Cut every sentence that only restates the previous one.</li>
              <li>Read every draft out loud. If you stumble, the sentence is wrong.</li>
            </ul>
          </div>
          <div className="card">
            <h4 className="card-title">Storyboard rules of thumb</h4>
            <ul style={{margin: 0, paddingLeft: 18, color: "var(--ink-dim)", fontSize: 14, lineHeight: 1.7}}>
              <li>One cell per shot, not per sentence. Some sentences share a shot.</li>
              <li>Mark each cell: <code>WIDE</code>, <code>MED</code>, <code>CLOSE</code>, or <code>INSERT</code>.</li>
              <li>Draw badly on purpose. Stick figures read faster than pretty sketches.</li>
              <li>If you can't draw it, you haven't decided it. Don't skip to filming.</li>
              <li>Note duration under each cell — it's a contract with the edit.</li>
            </ul>
          </div>
        </div>

        <div style={{marginTop: 28}}>
          <div style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 12}}>
            Try it live ↓
          </div>
          <window.Storyboard />
        </div>
      </div>
    </section>
  );
}

window.SectionHead = SectionHead;
window.WhatIs = WhatIs;
window.Structure = Structure;
window.Script = Script;