// site/extras.jsx — nav, download, faq, contact, support, footer

const SURFACES = [
  { value: 'clay',  color: '#C84500', label: 'Clay' },
  { value: 'grass', color: '#196B1E', label: 'Grass' },
  { value: 'hard',  color: '#1A44B0', label: 'Hard' },
];

function SunIcon() {
  return (
    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="7.5" cy="7.5" r="3" fill="currentColor"/>
      <line x1="7.5" y1="0.5" x2="7.5" y2="2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="7.5" y1="12.5" x2="7.5" y2="14.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="0.5" y1="7.5" x2="2.5" y2="7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="12.5" y1="7.5" x2="14.5" y2="7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="2.7" y1="2.7" x2="4.1" y2="4.1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="10.9" y1="10.9" x2="12.3" y2="12.3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="12.3" y1="2.7" x2="10.9" y2="4.1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="4.1" y1="10.9" x2="2.7" y2="12.3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

function MoonIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.5 9.2A6 6 0 0 1 4.8 1.5 6 6 0 1 0 12.5 9.2z" fill="currentColor"/>
    </svg>
  );
}

function Nav({ mode, setMode, palette, setPalette }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', h, { passive: true });
    h();
    return () => window.removeEventListener('scroll', h);
  }, []);

  const isDark = mode === 'dark';

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-logo">
        <span className="logo-ball"></span>
        <span>SETLY</span>
      </a>
      <div className="nav-links">
        <a href="#features">Widgets</a>
        <a href="#calendar">Calendar</a>
        <a href="#faq">FAQ</a>
      </div>

      <div className="nav-controls">
        {SURFACES.map(s => {
          const isActive = palette === s.value;
          return (
            <button
              key={s.value}
              title={s.label}
              onClick={() => setPalette(s.value)}
              style={{
                width: 18, height: 18,
                borderRadius: '50%',
                background: s.color,
                border: 'none',
                padding: 0,
                cursor: 'pointer',
                flexShrink: 0,
                outline: isActive ? `3px solid ${s.color}` : '3px solid transparent',
                outlineOffset: 2,
                transform: isActive ? 'scale(1.15)' : 'scale(1)',
                transition: 'transform 0.2s, outline 0.2s, opacity 0.2s',
                opacity: isActive ? 1 : 0.55,
              }}
            />
          );
        })}

        <div style={{ width: 1, height: 16, background: 'var(--divider)', flexShrink: 0 }} />

        <button
          title={isDark ? 'Light mode' : 'Dark mode'}
          onClick={() => setMode(isDark ? 'light' : 'dark')}
          style={{
            width: 32, height: 32,
            borderRadius: '50%',
            background: 'var(--surface-elev)',
            border: '1px solid var(--divider)',
            color: 'var(--text)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
            padding: 0,
            flexShrink: 0,
            transition: 'background 0.2s, transform 0.2s',
          }}
          onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.1)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
        >
          {isDark ? <SunIcon/> : <MoonIcon/>}
        </button>
      </div>

      <a href="#beta" className="nav-cta">
        <span className="dot"></span>
        Join the beta
      </a>
    </nav>
  );
}

function WordmarkBand() {
  return (
    <section style={{ padding: '40px 0 80px', overflow: 'hidden', background: 'var(--bg)' }}>
      <div className="wordmark">SETLY · TENNIS · ATP · WIDGETS · SETLY</div>
    </section>
  );
}

function Download() {
  return (
    <section className="section dl-section" id="download">
      <div className="dl-grid">
        <div className="dl-phone-stage">
          <div className="dl-stage-glow"></div>
          <div className="iphone">
            <div className="notch"></div>
            <div className="screen">
              <div className="lock-time">14:09</div>
              <div className="lock-date">Wednesday, May 20</div>
              <div className="lock-widgets">
                <WidgetCountdown accent="#196B1E"/>
                <WidgetTrend surface="clay"/>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div className="section-eyebrow"><span className="num">03</span><span>Download</span></div>
          <h2 className="section-title" style={{ marginTop: 18 }}>Run it<br/>on your<br/>phone.</h2>
          <p className="section-kicker" style={{ marginTop: 28 }}>
            Setly is in private TestFlight — currently invite-only while we tune the live activity backbone
            for the clay swing. Spots open weekly.
          </p>

          <div className="tf-card">
            <div className="tf-icon">βf</div>
            <div className="tf-meta">
              <div className="tf-title">TestFlight</div>
              <div className="tf-sub">iOS 17 or later · ~12 MB · Italian / English</div>
            </div>
            <a href="#beta" className="btn btn-primary tf-cta">Request invite <span className="arrow">→</span></a>
          </div>

          <div style={{ display: 'flex', gap: 24, marginTop: 32, flexWrap: 'wrap' }}>
            {['iPhone 12+', 'iOS 17+', 'StandBy ready', 'Live Activities', 'Lock screen'].map(t => (
              <div key={t} style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-3)' }}>· {t}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Is Setly free?", a: "Yes — Setly is free during the beta and the v1 launch. A small one-time tip jar (PayPal, Apple Pay) keeps it sustainable." },
    { q: "Does it cover WTA?", a: "Yes. Setly covers both ATP and WTA singles. Doubles support is on the way." },
    { q: "Where do scores come from?", a: "Setly aggregates publicly available scoring feeds. There can be a 30–90 second delay versus broadcast." },
    { q: "What devices are supported?", a: "Any iPhone running iOS 17 or later. iPadOS support arrives in v2.0. The watchOS complication is on the roadmap." },
    { q: "Is my data tracked?", a: "No analytics SDKs, no tracking. The app has a login option reserved for future features — it's there for when it's needed, not to collect anything now." },
  ];
  return (
    <section className="section" id="faq" style={{ background: 'var(--bg)' }}>
      <div className="section-head">
        <div>
          <div className="section-eyebrow"><span className="num">04</span><span>Questions</span></div>
          <h2 className="section-title">Service<br/>line.</h2>
        </div>
        <p className="section-kicker">Most questions arrive in the same shape. Here are the answers we keep on the locker-room wall.</p>
      </div>
      <div className="faq-wrap">
        {items.map((it, i) => (
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <span>{it.q}</span>
              <span className="ico">+</span>
            </div>
            <div className="faq-a">{it.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTABands() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [device, setDevice] = React.useState("");
  const mailto = React.useMemo(() => {
    const subject = encodeURIComponent("Setly · Beta tester request");
    const body = encodeURIComponent(`Ciao Federico!\n\nName: ${name}\nDevice: ${device}\n\nWhy I want in:\n…\n\n— ${email || "(your email)"}`);
    return `mailto:federico.deduro@gmail.com?subject=${subject}&body=${body}`;
  }, [name, device, email]);

  return (
    <section className="section" id="beta" style={{ background: 'var(--bg)', paddingTop: 60 }}>
      <div className="cta-row-2">
        <div className="big-cta beta">
          <div className="bg-blob"></div>
          <div className="label">— BETA TESTERS WANTED</div>
          <h3>Be on the<br/>service line.</h3>
          <p>
            We're letting in ~30 testers a week. Tell us who you are and what you watch — we'll send a TestFlight code by email.
          </p>
          <form
            onSubmit={(e) => { e.preventDefault(); window.location.href = mailto; }}
            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 28, maxWidth: 560 }}>
            <input
              type="text" placeholder="Name"
              value={name} onChange={(e) => setName(e.target.value)}
              style={{ padding: '14px 16px', borderRadius: 12, border: 'none', background: 'rgba(255,255,255,0.18)', color: '#fff', fontSize: 15, fontFamily: 'inherit', outline: 'none' }}
            />
            <input
              type="text" placeholder="Device (e.g. iPhone 15 Pro)"
              value={device} onChange={(e) => setDevice(e.target.value)}
              style={{ padding: '14px 16px', borderRadius: 12, border: 'none', background: 'rgba(255,255,255,0.18)', color: '#fff', fontSize: 15, fontFamily: 'inherit', outline: 'none' }}
            />
            <input
              type="email" placeholder="Email" required
              value={email} onChange={(e) => setEmail(e.target.value)}
              style={{ gridColumn: 'span 2', padding: '14px 16px', borderRadius: 12, border: 'none', background: 'rgba(255,255,255,0.18)', color: '#fff', fontSize: 15, fontFamily: 'inherit', outline: 'none' }}
            />
            <button type="submit" className="btn btn-on-color" style={{ gridColumn: 'span 2', justifyContent: 'center' }}>
              Send request <span className="arrow">→</span>
            </button>
          </form>
          <div style={{ marginTop: 16, fontSize: 12, opacity: 0.75, letterSpacing: '0.1em' }}>
            Or write directly to <a href="mailto:federico.deduro@gmail.com" style={{ color: '#fff', textDecoration: 'underline' }}>federico.deduro@gmail.com</a>
          </div>
        </div>

        <div className="big-cta support" id="support">
          <div className="bg-blob" style={{ background: 'rgba(255,255,255,0.06)' }}></div>
          <div className="label">— SUPPORT THE PROJECT</div>
          <h3>Buy us<br/>a new<br/>string set.</h3>
          <p>
            Setly is a one-developer side project. A small tip pays the Apple developer fee, the data feed, and an espresso between match days.
          </p>
          <a href="https://paypal.me/setlyFDD" target="_blank" rel="noopener" className="btn btn-on-color">
            Tip on PayPal <span className="arrow">→</span>
          </a>
          <div style={{ marginTop: 16, fontSize: 12, opacity: 0.6, letterSpacing: '0.1em' }}>paypal.me/setlyFDD</div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-row">
        <div>
          <a href="#top" className="nav-logo" style={{ fontSize: 32 }}>
            <span className="logo-ball"></span>
            <span>SETLY</span>
          </a>
          <p style={{ marginTop: 14, color: 'var(--text-3)', fontSize: 14, maxWidth: 280, lineHeight: 1.4 }}>
            Tennis on your home screen. A lone-wolf side project from Italy, 2026.
          </p>
        </div>
        <div>
          <h5>Product</h5>
          <ul>
            <li><a href="#features">Widgets</a></li>
            <li><a href="#calendar">Calendar</a></li>
            <li><a href="#download">TestFlight</a></li>
          </ul>
        </div>
        <div>
          <h5>Project</h5>
          <ul>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#beta">Beta program</a></li>
            <li><a href="#support">Support</a></li>
            <li><a href="mailto:federico.deduro@gmail.com">Contact</a></li>
          </ul>
        </div>
        <div>
          <h5>Built with</h5>
          <ul>
            <li>Swift · WidgetKit</li>
            <li>SwiftUI · ActivityKit</li>
            <li>iOS 17 · iPadOS 17</li>
            <li>Coffee · Strings</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Setly · Made by Federico DD</span>
        <span>Game · Set · Match</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Download, FAQ, CTABands, Footer, WordmarkBand });