/* global React, ReactDOM */
const { useState, useEffect } = React;

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap">
        <a className="nav-brand" href="#top">
          <img className="nav-brand-icon" src="assets/logo-icon-1024.png" alt="" />
          <span className="nav-brand-text"><span>Sail</span><b>Tactician</b></span>
        </a>
        <div className="nav-links">
          <a href="#prestart">Better Starts</a>
          <a href="#vmg">Faster Sailing</a>
          <a href="#review">Post-Race Analytics</a>
          <a href="#phone">Phone</a>
          <a href="#privacy">Privacy</a>
        </div>
        <a className="nav-cta" href="https://apps.apple.com/us/app/sail-tactician/id6741540409">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04a4.79 4.79 0 0 1 2.3-4.03 4.93 4.93 0 0 0-3.88-2.1c-1.63-.17-3.2.97-4.03.97-.85 0-2.1-.95-3.46-.92A5.17 5.17 0 0 0 3.6 8.59c-1.86 3.22-.47 7.97 1.33 10.58.88 1.28 1.93 2.71 3.3 2.66 1.33-.06 1.83-.86 3.43-.86 1.6 0 2.05.86 3.45.83 1.42-.03 2.32-1.3 3.19-2.59a11.5 11.5 0 0 0 1.45-2.96 4.65 4.65 0 0 1-2.7-4.21zM14.7 4.6a4.7 4.7 0 0 0 1.08-3.4 4.79 4.79 0 0 0-3.1 1.6 4.46 4.46 0 0 0-1.1 3.27 3.95 3.95 0 0 0 3.12-1.47z" /></svg>
          App Store
        </a>
      </div>
    </nav>);

}

function AppStoreButton() {
  return (
    <a href="https://apps.apple.com/us/app/sail-tactician/id6741540409" className="app-store-btn">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04a4.79 4.79 0 0 1 2.3-4.03 4.93 4.93 0 0 0-3.88-2.1c-1.63-.17-3.2.97-4.03.97-.85 0-2.1-.95-3.46-.92A5.17 5.17 0 0 0 3.6 8.59c-1.86 3.22-.47 7.97 1.33 10.58.88 1.28 1.93 2.71 3.3 2.66 1.33-.06 1.83-.86 3.43-.86 1.6 0 2.05.86 3.45.83 1.42-.03 2.32-1.3 3.19-2.59a11.5 11.5 0 0 0 1.45-2.96 4.65 4.65 0 0 1-2.7-4.21zM14.7 4.6a4.7 4.7 0 0 0 1.08-3.4 4.79 4.79 0 0 0-3.1 1.6 4.46 4.46 0 0 0-1.1 3.27 3.95 3.95 0 0 0 3.12-1.47z" /></svg>
      <div className="tx">
        <small>Download on the</small>
        <span>App Store</span>
      </div>
    </a>);

}

function Hero() {
  const heroBg = (window.__TWEAK_DEFAULTS__ && window.__TWEAK_DEFAULTS__.heroBg) || "image";
  const [bg, setBg] = useState(heroBg);
  useEffect(() => {
    const handler = (e) => {
      if (e.data && e.data.type === "__hero_bg") setBg(e.data.value);
    };
    window.addEventListener("message", handler);
    return () => window.removeEventListener("message", handler);
  }, []);
  return (
    <section className="hero" id="top" data-hero-bg={bg}>
      <div className="hero-bg" />
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">Apple Watch · iPhone</div>
            <h1>Tactics on<br /><span className="accent">your wrist.</span></h1>
            <p className="lede">
              Pre-start, line bias, VMG and laylines — at a glance. Leave the phone on shore. Race the watch standalone.
            </p>
            <div className="hero-ctas">
              <AppStoreButton />
              <a className="ghost-btn" href="#prestart">
                <span className="play"><svg width="10" height="10" viewBox="0 0 10 10"><polygon points="2,1 9,5 2,9" fill="currentColor" /></svg></span>
                30-second demo
              </a>
            </div>
            <div className="hero-stats">
              <div className="st">
                <div className="num">Better<span style={{ fontSize: 13, color: 'rgba(244,247,250,0.6)', marginLeft: 6, fontWeight: 500 }}>starts</span></div>
                <div className="lab">Off the line first</div>
              </div>
              <div className="st">
                <div className="num">Faster<span style={{ fontSize: 13, color: 'rgba(244,247,250,0.6)', marginLeft: 6, fontWeight: 500 }}>legs</span></div>
                <div className="lab">Sail your true VMG</div>
              </div>
              <div className="st">
                <div className="num">Higher<span style={{ fontSize: 13, color: 'rgba(244,247,250,0.6)', marginLeft: 6, fontWeight: 500 }}>finishes</span></div>
                <div className="lab">Race after race</div>
              </div>
            </div>
          </div>
          <HeroCountdownStage start={90} />
        </div>
      </div>
    </section>);

}

function PillarsStrip() {
  return (
    <section className="pillars">
      <div className="wrap">
        <div className="pillar">
          <div className="lab">Pre-Start</div>
          <div className="num">5:00<span className="u">→ 0:00</span></div>
          <div className="desc">Synced countdown with time-to-burn and OCS warning.</div>
        </div>
        <div className="pillar">
          <div className="lab">Line Bias</div>
          <div className="num">±18<span className="u">°</span></div>
          <div className="desc">Pin the committee boat and pin. We solve the geometry.</div>
        </div>
        <div className="pillar">
          <div className="lab">Live VMG</div>
          <div className="num">0.1<span className="u">kts</span></div>
          <div className="desc">Tabular numerals. No flicker. Glance and go.</div>
        </div>
        <div className="pillar">
          <div className="lab">Post-Race</div>
          <div className="num">100<span className="u">%</span></div>
          <div className="desc">Track, polar, splits — all on your iPhone after.</div>
        </div>
      </div>
    </section>);

}

function PreStartFeature() {
  return (
    <section className="section section--lg" id="prestart">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Better Starts</div>
            <h2>Cross the line at full speed.</h2>
          </div>
          <p>Hit the favored end at top pace, every race — not still accelerating ten seconds late. The watch does the math so the gun finds you already moving.</p>
        </div>
        <div className="feature">
          <div className="feature-copy">
            <ul className="feature-bullets">
              <li>
                <span className="dot burn"></span>
                <span>
                  <b>Start with momentum.</b>
                  <span>Know the exact moment to bear away and accelerate. Cross at hull speed, not half speed.</span>
                </span>
              </li>
              <li>
                <span className="dot lift"></span>
                <span>
                  <b>Win the favored end.</b>
                  <span>Bias in degrees the second the breeze shifts. Make the call once and commit.</span>
                </span>
              </li>
              <li>
                <span className="dot foul"></span>
                <span>
                  <b>Stop blowing recalls.</b>
                  <span>The face flips red the instant you're early. Bail out clean and live to round Mark 1.</span>
                </span>
              </li>
              <li>
                <span className="dot lay"></span>
                <span>
                  <b>One sync, then race.</b>
                  <span>Tap to the gun and forget the sequence. Eyes up, head out of the watch.</span>
                </span>
              </li>
            </ul>
          </div>
          <div>
            <PreStartStoryboard />
          </div>
        </div>
      </div>
    </section>);

}

function LineBiasFeature() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="feature reverse">
          <LineBiasDiagram />
          <div className="feature-copy">
            <div className="eyebrow">Better Initial Position</div>
            <h2>Start on the favored end.<br /><em>Every time.</em></h2>
            <p>Two close-hauled tacks once, and we calibrate to your boat. From then on, the favored end stays right whether the breeze stays put or backs ten degrees at two minutes.</p>
            <ul className="feature-bullets">
              <li>
                <span className="dot lift"></span>
                <span>
                  <b>A favored end you can trust.</b>
                  <span>In degrees. Not "slight" or "heavy." Make the call once and commit the boat to it.</span>
                </span>
              </li>
              <li>
                <span className="dot lay"></span>
                <span>
                  <b>True distance to the line.</b>
                  <span>Reads honest even on a slewed run-in — so you don't burn time recovering from a bad angle.</span>
                </span>
              </li>
              <li>
                <span className="dot lay"></span>
                <span>
                  <b>Re-bias on every shift.</b>
                  <span>Header at two minutes? The favored end updates before you even check the wind.</span>
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function VmgFeature() {
  return (
    <section className="section" id="vmg">
      <div className="wrap">
        <div className="feature">
          <div className="feature-copy">
            <div className="eyebrow">Faster Upwind</div>
            <h2>Faster legs.<br /><em>Fewer extra tacks.</em></h2>
            <p>Hit the layline in one tack, not three. Sail your fastest angle on every leg. A glance at the watch tells you whether the last shift was a lift or a header — before the boat next to you reacts.</p>
            <ul className="feature-bullets">
              <li>
                <span className="dot lay"></span>
                <span>
                  <b>Tack the layline once.</b>
                  <span>Stop overstanding the windward mark. Stop tacking back. The seconds you save here win regattas.</span>
                </span>
              </li>
              <li>
                <span className="dot lift"></span>
                <span>
                  <b>Lock onto your fast angle.</b>
                  <span>You'll see a header before you feel the boat slow — and turn it into the next gain.</span>
                </span>
              </li>
              <li>
                <span className="dot foul"></span>
                <span>
                  <b>Stay out of the no-go zone.</b>
                  <span>Visible at any heading. No mental geometry while you're trimming at six knots.</span>
                </span>
              </li>
            </ul>
          </div>
          <VmgCompassStage />
        </div>
      </div>
    </section>);

}

function PhoneFeature() {
  return (
    <section className="section section--lg" id="phone">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">No Watch? No Problem.</div>
            <h2>Tactics on your phone, too.</h2>
          </div>
          <p>The same instrument face runs full-screen on iPhone — pre-start, bias, VMG, laylines. Mount it on the mast or in a binnacle pod. Every metric, every readout, none of it watered down.</p>
        </div>
        <div className="feature">
          <div className="feature-copy">
            <ul className="feature-bullets">
              <li>
                <span className="dot lay"></span>
                <span>
                  <b>Full-screen race mode.</b>
                  <span>The watch UI, scaled up. Same numerals, same colors, same logic.</span>
                </span>
              </li>
              <li>
                <span className="dot burn"></span>
                <span>
                  <b>Big-boat-friendly.</b>
                  <span>Mast-mount your iPhone. Read the countdown from the cockpit.</span>
                </span>
              </li>
              <li>
                <span className="dot lift"></span>
                <span>
                  <b>Standalone, too.</b>
                  <span>No watch required. iPhone GPS handles the geometry on its own.</span>
                </span>
              </li>
              <li>
                <span className="dot lay"></span>
                <span>
                  <b>Or run both.</b>
                  <span>Watch on the wrist, phone on the mast — same race, two views.</span>
                </span>
              </li>
            </ul>
          </div>
          <div className="review-stage">
            <PhoneFrame scale={1.0}>
              <PhoneRaceMode />
            </PhoneFrame>
          </div>
        </div>
      </div>
    </section>);

}

function ReviewFeature() {
  return (
    <section className="section section--lg" id="review">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Learn From Every Race</div>
            <h2>Find the seconds you left out there.</h2>
          </div>
          <p>Every race makes the next one faster. The iPhone companion shows you exactly where the boat ahead pulled away — and exactly which angle to fix in the next practice.</p>
        </div>
        <div className="feature reverse">
          <div className="review-stage">
            <PhoneFrame scale={1.0}>
              <PhoneRaceReview />
            </PhoneFrame>
          </div>
          <div className="feature-copy">
            <ul className="feature-bullets">
              <li>
                <span className="dot lay"></span>
                <span>
                  <b>See where you lost the boat.</b>
                  <span>Scrub the track. The moment a competitor crossed ahead is the moment you stop guessing why.</span>
                </span>
              </li>
              <li>
                <span className="dot lift"></span>
                <span>
                  <b>Fix one weak point a week.</b>
                  <span>Polar vs. target reveals your slowest angle. Practice it. Watch your scores climb.</span>
                </span>
              </li>
              <li>
                <span className="dot lay"></span>
                <span>
                  <b>Score every maneuver.</b>
                  <span>Tacks, gybes, port vs. starboard time. Small leaks add up to places on the scoresheet.</span>
                </span>
              </li>
              <li>
                <span className="dot lift"></span>
                <span>
                  <b>Honest targets, your boat.</b>
                  <span>MC Scow, Laser, J/70 — or your own polar. Compare against what your boat can actually do.</span>
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function PrivacySection() {
  return (
    <section className="section--lg privacy" id="privacy">
      <div className="wrap" style={{ padding: "96px 32px" }}>
        <div>
          <div className="eyebrow" style={{ color: "#3CE0A1" }}>Privacy-first</div>
          <h2>Your data stays <em>private</em>.</h2>
          <p>Sail Tactician collects no personal data. Tracks, splits, polar curves and boat profiles live on your watch and iPhone, and sync only through your private iCloud — never through us.</p>
        </div>
        <div className="panel">
          <div className="row">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
            <div><b style={{ color: '#fff', display: 'block', marginBottom: 2 }}>On-device analytics.</b>Every metric is computed on your watch and phone. Nothing is sent off-device.</div>
          </div>
          <div className="row">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
            <div><b style={{ color: '#fff', display: 'block', marginBottom: 2 }}>Private iCloud sync.</b>Your races move between your own devices, end-to-end. We can't read them.</div>
          </div>
          <div className="row">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
            <div><b style={{ color: '#fff', display: 'block', marginBottom: 2 }}>Yours to export.</b>GPX and CSV out, on demand. Take your data anywhere.</div>
          </div>
          <div className="row">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
            <div><b style={{ color: '#fff', display: 'block', marginBottom: 2 }}>Yours to delete.</b>One tap clears every race from every device. No archive on a server.</div>
          </div>
        </div>
      </div>
    </section>);

}

function FaqSection() {
  const items = [
  { q: "Which Apple Watch models?", a: "Series 6 and later, including Ultra. The countdown is optimised for the Always-On display." },
  { q: "Does it work without a phone?", a: "Either way. The watch races standalone with onboard GPS, or pair with the iPhone companion to race and analyze on a bigger screen — your call." },
  { q: "What boats are supported?", a: "Anything you can fit a polar to — dinghies, sportboats, keelboats. Pre-built profiles for MC Scow, Laser, Optimist, J/70 and Etchells." },
  { q: "Battery on a long regatta day?", a: "Roughly 6 hours of recording at full sample rate. Power Save mode stretches it to 9." },
  { q: "Can I see speed in MPH or KPH?", a: "Knots, MPH or KPH — your call. Pre-start defaults to knots; the rest is per-screen." },
  { q: "What does it cost?", a: "$29.99 a year. No in-app purchases. No subscriptions for individual features." }];

  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">FAQ</div>
            <h2>Common questions.</h2>
          </div>
          <p>If something here doesn't answer it, write us. We read everything and we sail too.</p>
        </div>
        <div className="faq-grid">
          {items.map((it) =>
          <div key={it.q} className="faq-item">
              <h4>{it.q}</h4>
              <p>{it.a}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Testimonials() {
  const quotes = [
  {
    stat: "4th → 1st",
    unit: "in 6 weeks",
    quote: "Stopped overstanding the windward mark. That single fix moved us up the fleet.",
    who: ""
  },
  {
    stat: "+0.4",
    unit: "kts upwind",
    quote: "We were sailing the same boat measurably faster the day after the first review session.",
    who: ""
  },
  {
    stat: "0",
    unit: "OCS recalls",
    quote: "Haven't been pulled back from a start since the day I started racing with this on my wrist.",
    who: ""
  }];

  return (
    <section className="section testimonials">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Results</div>
            <h2>The numbers on the scoreboard.</h2>
          </div>
          <p>Real sailors. Real regattas. The fix they made, the result they got. <em className="placeholder-note">— Pull-quote placeholders. Drop in real testimonials when ready.</em></p>
        </div>
        <div className="testimonial-grid">
          {quotes.map((q, i) =>
          <figure key={i} className="testimonial">
              <div className="testimonial-stat">
                <div className="stat-num">{q.stat}</div>
                <div className="stat-unit">{q.unit}</div>
              </div>
              <blockquote>&ldquo;{q.quote}&rdquo;</blockquote>
              {q.who && <figcaption>{q.who}</figcaption>}
            </figure>
          )}
        </div>
      </div>
    </section>);

}

function FinalCta() {
  return (
    <section className="final-cta" id="download">
      <div className="wrap">
        <h2>Race faster.<br /><em>Finish higher.</em></h2>
        <p>Better starts, faster legs, smarter reviews — on the wrist your watch already is. Apple Watch Series 6 and later. iPhone with iOS 17.</p>
        <div className="ctas">
          <AppStoreButton />
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="col-brand">
          <a className="nav-brand" href="#top">
            <img className="nav-brand-icon" src="assets/logo-icon-1024.png" alt="" />
            <span className="nav-brand-text"><span>Sail</span><b>Tactician</b></span>
          </a>
          <p>Race-ready tactical instruments for serious sailors. Designed in the United States.</p>
        </div>
        <div>
          <h5>Product</h5>
          <ul>
            <li><a href="#prestart">Better Starts</a></li>
            <li><a href="#vmg">Faster Sailing</a></li>
            <li><a href="#review">Post-Race Analytics</a></li>
            <li><a href="#phone">Phone</a></li>
            <li><a href="#privacy">Privacy</a></li>
          </ul>
        </div>
        <div>
          <h5>Support</h5>
          <ul>
            <li><a href="boat-profiles.html">Boat profiles</a></li>
            <li><a href="setup-guide.html">Setup guide</a></li>
            <li><a href="/support">Contact</a></li>
          </ul>
        </div>
        <div>
          <h5>Legal</h5>
          <ul>
            <li><a href="privacy-policy.html">Privacy policy</a></li>
            <li><a href="terms-of-service.html">Terms</a></li>
          </ul>
        </div>
      </div>
      <div className="wrap footer-bottom">
        <span>© 2026 Sail Tactician. All rights reserved.</span>
        <span>v3.2 · Apple Watch Series 6+</span>
      </div>
    </footer>);

}

/* ============================================================================
   Tweaks panel
   ============================================================================ */
function TweaksContent() {
  const t = useTweaks(window.__TWEAK_DEFAULTS__);
  // Apply theme & accent live
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme || "dark");
  }, [t.theme]);
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent || "#46C5FF");
    if (t.accent) {
      document.documentElement.style.setProperty("--lay", t.accent);
    }
  }, [t.accent]);
  useEffect(() => {
    document.documentElement.style.setProperty("--brand-tactic", t.brand || "#0E66A8");
  }, [t.brand]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero">
        <TweakText label="Headline (line 1)" value={t.heroLine1} onChange={(v) => t.set("heroLine1", v)} />
        <TweakText label="Headline (line 2, accent)" value={t.heroLine2} onChange={(v) => t.set("heroLine2", v)} />
        <TweakNumber label="Pre-start countdown (sec)" value={t.countdown} min={5} max={300} step={5} onChange={(v) => t.set("countdown", v)} />
      </TweakSection>
      <TweakSection title="Hero background">
        <TweakRadio label="Background" value={t.heroBg} options={[{value:"image",label:"Image"},{value:"grid",label:"Grid"}]} onChange={v => { t.set("heroBg", v); window.postMessage({type:"__hero_bg", value:v}, "*"); }} />
      </TweakSection>
      <TweakSection title="Color">
        <TweakColor label="Accent (laylines)" value={t.accent} options={["#46C5FF", "#3CE0A1", "#FFB300", "#0E66A8"]} onChange={(v) => t.set("accent", v)} />
        <TweakColor label="Brand" value={t.brand} options={["#0E66A8", "#0A2A44", "#1B4F7E", "#000000"]} onChange={(v) => t.set("brand", v)} />
      </TweakSection>
    </TweaksPanel>);

}

/* ============================================================================
   App
   ============================================================================ */
function App() {
  const T = window.__TWEAK_DEFAULTS__;
  // patch hero line
  useEffect(() => {
    const h = document.querySelector(".hero h1");
    if (!h) return;
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <PillarsStrip />
      <PreStartFeature />
      <LineBiasFeature />
      <VmgFeature />
      <ReviewFeature />
      <PhoneFeature />
      <Testimonials />
      <PrivacySection />
      <FaqSection />
      <FinalCta />
      <Footer />
      <TweaksContent />
    </>);

}

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