/* Jancie Vinson campaign site — main React app */
const { useState, useEffect, useMemo } = React;

const ELECTION_DATE = new Date('2026-08-18T07:00:00-04:00');
const CAMPAIGN_EMAIL = 'jvcampaign@yahoo.com';
const CAMPAIGN_PHONE = '(352) 214-7502';
const CAMPAIGN_PHONE_TEL = '+13522147502';
const CAMPAIGN_ADDRESS_LINE1 = '5350 SW 62nd Avenue';
const CAMPAIGN_ADDRESS_LINE2 = 'Gainesville, FL 32608';

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "hybrid",
  "heroLayout": "split",
  "showCountdown": true,
  "headlineVariant": "protect"
}/*EDITMODE-END*/;

/* ---------- Icons ---------- */
const Icon = {
  Calendar: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
  Pin: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  Mail: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
  Phone: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  School: () => <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 2 9l10 6 10-6-10-6z"/><path d="M6 11v6a6 6 0 0 0 12 0v-6"/></svg>,
  Teacher: () => <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="7" r="4"/><path d="M5 21v-2a7 7 0 0 1 14 0v2"/></svg>,
  Shield: () => <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
  Star: () => <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>,
  Sign: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9h18l-2 7H5z"/><path d="M12 16v5"/><path d="M9 21h6"/></svg>,
  Megaphone: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 11l16-7v16L3 13z"/><path d="M3 11v2"/></svg>,
  Heart: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>,
  Check: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  FB: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88V14.9H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.45 2.9h-2.34v6.98A10 10 0 0 0 22 12z"/></svg>,
  X: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>,
  IG: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>,
};

/* ---------- Countdown ---------- */
function useCountdown(target) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target.getTime() - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  return { days, hours, mins, secs };
}

function Countdown() {
  const { days, hours, mins, secs } = useCountdown(ELECTION_DATE);
  return (
    <div className="countdown-bar">
      <div className="container countdown-inner">
        <div className="countdown-label">Election Day · Aug 18, 2026</div>
        <div className="countdown-units">
          <div className="countdown-unit"><span className="countdown-num">{days}</span><div className="countdown-text">Days</div></div>
          <div className="countdown-unit"><span className="countdown-num">{hours}</span><div className="countdown-text">Hours</div></div>
          <div className="countdown-unit"><span className="countdown-num">{mins}</span><div className="countdown-text">Mins</div></div>
          <div className="countdown-unit"><span className="countdown-num">{secs}</span><div className="countdown-text">Secs</div></div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Nav ---------- */
function Nav() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  return (
    <nav className="nav">
      <div className="nav-row">
        <a href="#top" className="nav-brand" onClick={close}>
          <div className="nav-brand-mark">JV</div>
          <div>
            <div className="nav-brand-name">Jancie Vinson</div>
            <div className="nav-brand-sub">School Board · District 5</div>
          </div>
        </a>
        <button className="nav-mobile-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
        <div className={`nav-links${open ? ' open' : ''}`}>
          <a href="#about" onClick={close}>About</a>
          <a href="#priorities" onClick={close}>Priorities</a>
          <a href="#involved" onClick={close}>Get Involved</a>
          <a href="#voter" onClick={close}>Vote</a>
          <a href="#support" onClick={close}>Support</a>
          <a href="#contact" className="nav-cta" onClick={close}>Contact</a>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
const HEADLINES = {
  protect: { lead: 'Protect Our', accent: 'Neighborhood Schools', tail: '' },
  fresh: { lead: 'Fresh Ideas.', accent: 'Real Accountability.', tail: '' },
  serve: { lead: 'A Lifetime of Service.', accent: 'A Future for Our Kids.', tail: '' },
};

function Hero({ tweaks }) {
  const headline = HEADLINES[tweaks.headlineVariant] || HEADLINES.protect;
  return (
    <section className="hero" id="top">
      <div className="hero-stripes"></div>
      <div className="container hero-content">
        <div>
          <div className="hero-eyebrow">
            <span className="dot"></span>
            Vote Tuesday, August 18, 2026
          </div>
          <h1>
            {headline.lead} <span className="accent-gold">{headline.accent}</span>
          </h1>
          <div className="hero-tagline">
            "If we do not protect our neighborhood schools now, we may not have them tomorrow."
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item"><Icon.Star /> Integrity</div>
            <div className="hero-meta-item"><Icon.Star /> Common Sense</div>
            <div className="hero-meta-item"><Icon.Star /> Commitment</div>
          </div>
          <div className="hero-cta-row">
            <a href="#priorities" className="btn btn-primary">See Her Plan</a>
            <a href="#involved" className="btn btn-outline">Get Involved</a>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div className="hero-portrait">
            <img src="assets/jancie-portrait.jpg?v=3" alt="Jancie Vinson, Candidate for Alachua County School Board, District 5" />
          </div>
          <div className="hero-badge">Elect 2026</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Brand Band (full logo) ---------- */
function BrandBand() {
  return (
    <section className="brand-band">
      <div className="container">
        <div className="brand-band-inner">
          <div className="brand-band-rule"></div>
          <img src="assets/jancie-logo-full.png" alt="Jancie Vinson — Alachua County School Board, District 5" />
          <div className="brand-band-rule"></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Values strip ---------- */
function ValuesStrip() {
  return (
    <div className="values-strip">
      <div className="container values-row">
        <div className="value-pill"><span className="star">★</span>INTEGRITY</div>
        <div className="value-pill"><span className="star">★</span>COMMON SENSE</div>
        <div className="value-pill"><span className="star">★</span>COMMITMENT</div>
      </div>
    </div>
  );
}

/* ---------- About ---------- */
function About() {
  return (
    <section className="section about" id="about">
      <div className="container">
        <div className="about-tagline">Integrity · Common Sense · Commitment</div>
        <div className="section-title">
          <div className="eyebrow">Meet the Candidate</div>
          <h2>About Jancie Vinson</h2>
          <div className="section-divider"></div>
          <p>A lifetime Gainesville resident, retired law-enforcement officer, and lifelong advocate for our public schools.</p>
        </div>
        <div className="about-grid">
          <div>
            <div style={{ position: 'relative' }}>
              <div className="about-photo">
                <img src="assets/jancie-headshot.jpg" alt="Jancie Vinson" />
              </div>
              <div className="about-photo-frame"></div>
            </div>
          </div>
          <div className="about-text">
            <div className="eyebrow">Her Story</div>
            <h3 style={{ fontSize: '1.7rem', marginBottom: '16px' }}>Born here. Raised here. Ready to lead here.</h3>
            <div className="about-bio">
              <p>
                <strong>Jancie Vinson</strong> was born and raised in Southwest Gainesville on a small farm — the tenth of eleven children. She attended Alachua County public schools, graduated from <strong>Buchholz High School</strong>, and earned her <strong>Bachelor of Science in Business Administration from the University of Florida</strong>.
              </p>
              <p>
                For more than <strong>36 years</strong>, Jancie served our community through the Florida Department of Corrections, retiring as a Probation Supervisor. As a retired law-enforcement officer, she understands prevention, intervention, accountability — and one essential truth: <em>it is cheaper to educate than to incarcerate.</em>
              </p>
              <p>
                Jancie is the proud sister of <strong>three former Alachua County teachers</strong>, the godmother raising her 9-year-old godchild, and a member of <strong>Wesley Chapel United Methodist Church</strong>. She has served the community as Vice President of the Gainesville NAACP, a member of the Alachua County Local Planning Commission, an appointed member of the <strong>Alachua County Housing &mdash; AHAC Advisory Board</strong>, and currently as an elected Soil & Water Conservation District supervisor.
              </p>
            </div>
            <div className="about-stats">
              <div>
                <div className="about-stat-num">36+</div>
                <div className="about-stat-label">Years Public Service</div>
              </div>
              <div>
                <div className="about-stat-num">100%</div>
                <div className="about-stat-label">Lifetime Gainesville</div>
              </div>
              <div>
                <div className="about-stat-num">D5</div>
                <div className="about-stat-label">School Board District</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Priorities ---------- */
const PRIORITIES = [
  {
    icon: <Icon.School />,
    title: 'Strong Neighborhood Schools',
    bullets: [
      'Keep Eastside and Alachua elementary schools open',
      'Fight unfair zoning that weakens communities',
      'Schools as community anchors, not bargaining chips',
    ],
  },
  {
    icon: <Icon.Teacher />,
    title: 'Invest in Educators',
    bullets: [
      'Competitive pay for teachers, paraprofessionals & staff',
      'Recruit and retain quality educators',
      'Cut waste — fund the classroom first',
    ],
  },
  {
    icon: <Icon.Shield />,
    title: 'Protect & Redirect Our Children',
    bullets: [
      'Early intervention, mentoring, and tutoring',
      'Stop the school-to-prison pipeline',
      'Anonymous reporting for student safety concerns',
    ],
  },
  {
    icon: <Icon.Star />,
    title: 'High-Quality Education',
    bullets: [
      'Accountability, balance, and respect in policy',
      'Career, college, and workforce readiness',
      'Close the achievement gap with proven programs',
    ],
  },
];

function Priorities() {
  return (
    <section className="section priorities" id="priorities">
      <div className="container">
        <div className="section-title">
          <div className="eyebrow">A Clear Plan for Our Schools</div>
          <h2>Her Commitment to You</h2>
          <div className="section-divider"></div>
          <p>Four priorities. Real solutions. Built from a lifetime of listening to families, students, and educators across Alachua County.</p>
        </div>
        <div className="priorities-grid">
          {PRIORITIES.map((p, i) => (
            <div className="priority-card" key={i}>
              <div className="priority-icon">{p.icon}</div>
              <h3>{p.title}</h3>
              <ul>
                {p.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Quote section ---------- */
function QuoteSection() {
  return (
    <section className="quote-section">
      <div className="container quote-content">
        <blockquote>
          Our schools should be pipelines to opportunity — not pathways into the criminal justice system. Leadership requires visibility. It requires accessibility. It requires courage. I will be present. I will listen. And I will act.
        </blockquote>
        <div className="quote-attrib">— Jancie Vinson</div>
      </div>
    </section>
  );
}

/* ---------- Get Involved ---------- */
function Involved() {
  return (
    <section className="section involved" id="involved">
      <div className="container">
        <div className="section-title">
          <div className="eyebrow">Join the Movement</div>
          <h2>Get Involved</h2>
          <div className="section-divider"></div>
          <p>This campaign belongs to the community. Whether you give a dollar or an hour, your involvement matters.</p>
        </div>
        <div className="involved-grid">
          <div className="involved-card">
            <div className="involved-card-icon"><Icon.Sign /></div>
            <h3>Display a Yard Sign</h3>
            <p>Show your support to neighbors. Request a sign for your yard or business.</p>
            <p style={{ marginTop: '16px' }}>
              <a href="#contact" className="btn btn-ghost" style={{ padding: '10px 20px', fontSize: '0.85rem' }}>Request Sign</a>
            </p>
          </div>
          <div className="involved-card">
            <div className="involved-card-icon"><Icon.Megaphone /></div>
            <h3>Host a Meet & Greet</h3>
            <p>Invite neighbors over to meet Jancie. Coffee, conversation, and community.</p>
            <p style={{ marginTop: '16px' }}>
              <a href="#contact" className="btn btn-ghost" style={{ padding: '10px 20px', fontSize: '0.85rem' }}>Host Event</a>
            </p>
          </div>
          <div className="involved-card">
            <div className="involved-card-icon"><Icon.Heart /></div>
            <h3>Volunteer</h3>
            <p>Knock doors, make calls, or help at events. Every hour brings us closer to victory.</p>
            <p style={{ marginTop: '16px' }}>
              <a href="#contact" className="btn btn-ghost" style={{ padding: '10px 20px', fontSize: '0.85rem' }}>Sign Up</a>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Campaign Song Player ---------- */
function SongPlayer() {
  const audioRef = React.useRef(null);
  const [playing, setPlaying] = useState(false);
  const [time, setTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const a = audioRef.current;
    if (!a) return;
    const onTime = () => setTime(a.currentTime);
    const onMeta = () => { setDuration(a.duration); setLoaded(true); };
    const onEnd = () => setPlaying(false);
    a.addEventListener('timeupdate', onTime);
    a.addEventListener('loadedmetadata', onMeta);
    a.addEventListener('ended', onEnd);
    return () => {
      a.removeEventListener('timeupdate', onTime);
      a.removeEventListener('loadedmetadata', onMeta);
      a.removeEventListener('ended', onEnd);
    };
  }, []);

  const toggle = () => {
    const a = audioRef.current;
    if (!a) return;
    if (playing) { a.pause(); setPlaying(false); }
    else { a.play(); setPlaying(true); }
  };
  const seek = (e) => {
    const a = audioRef.current;
    if (!a || !duration) return;
    const rect = e.currentTarget.getBoundingClientRect();
    const pct = (e.clientX - rect.left) / rect.width;
    a.currentTime = pct * duration;
  };
  const fmt = (s) => {
    if (!s || isNaN(s)) return '0:00';
    const m = Math.floor(s / 60);
    const ss = Math.floor(s % 60).toString().padStart(2, '0');
    return `${m}:${ss}`;
  };
  const pct = duration ? (time / duration) * 100 : 0;

  return (
    <section className="song-section" id="campaign-song">
      <div className="container">
        <div className="song-card">
          <div className="song-art">
            <div className="song-art-disc">
              <div className="song-art-center">JV</div>
            </div>
            <div className="song-stripes"></div>
          </div>
          <div className="song-body">
            <div className="song-eyebrow">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
              </svg>
              Campaign Song
            </div>
            <h3 className="song-title">Vote Vinson</h3>
            <p className="song-sub">Press play. Turn it up. Share it with a neighbor.</p>
            <div className="song-controls">
              <button className="song-play" onClick={toggle} aria-label={playing ? 'Pause' : 'Play'}>
                {playing ? (
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
                ) : (
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                )}
              </button>
              <div className="song-track-wrap">
                <div className="song-track" onClick={seek}>
                  <div className="song-track-fill" style={{ width: `${pct}%` }}></div>
                  <div className="song-track-knob" style={{ left: `${pct}%` }}></div>
                </div>
                <div className="song-times">
                  <span>{fmt(time)}</span>
                  <span>{loaded ? fmt(duration) : '—:—'}</span>
                </div>
              </div>
            </div>
            <audio ref={audioRef} src="assets/campaign-song.mp3" preload="metadata"></audio>
            <SongShare />
          </div>
        </div>
        <div className="song-disclaimer">
          Political advertisement paid for and approved by Jancie Vinson, Candidate for Alachua County School Board, District 5.
        </div>
      </div>
    </section>
  );
}

/* ---------- Song Share Buttons ---------- */
function SongShare() {
  const [copied, setCopied] = useState(false);
  const songUrl = 'https://jancievinson.com/#campaign-song';
  const shareText = "Listen to Jancie Vinson's campaign song — vote August 18, 2026 for Alachua County School Board, District 5!";

  const links = {
    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(songUrl)}`,
    twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(songUrl)}&text=${encodeURIComponent(shareText)}`,
    sms: `sms:?&body=${encodeURIComponent(shareText + ' ' + songUrl)}`,
    email: `mailto:?subject=${encodeURIComponent("Jancie Vinson's Campaign Song")}&body=${encodeURIComponent(shareText + '\n\n' + songUrl)}`,
  };

  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(songUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {
      // fallback
      const ta = document.createElement('textarea');
      ta.value = songUrl;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return (
    <div className="song-share">
      <div className="song-share-label">Share the Song</div>
      <div className="song-share-buttons">
        <a href={links.facebook} target="_blank" rel="noopener noreferrer" className="share-btn share-fb" aria-label="Share on Facebook">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88V14.9H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.45 2.9h-2.34v6.98A10 10 0 0 0 22 12z"/></svg>
        </a>
        <a href={links.twitter} target="_blank" rel="noopener noreferrer" className="share-btn share-x" aria-label="Share on X">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
        <a href={links.sms} className="share-btn share-sms" aria-label="Share via Text Message">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
        </a>
        <a href={links.email} className="share-btn share-email" aria-label="Share via Email">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        </a>
        <button onClick={copyLink} className="share-btn share-link" aria-label="Copy link to song">
          {copied ? (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          ) : (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
          )}
          <span className="share-btn-text">{copied ? 'Copied!' : 'Copy link'}</span>
        </button>
      </div>
    </div>
  );
}

/* ---------- Support (donate by mail) ---------- */
function Support() {
  return (
    <section className="section donate" id="support">
      <div className="container">
        <div className="section-title">
          <div className="eyebrow" style={{ color: 'var(--gold)' }}>Power the Campaign</div>
          <h2>Support Jancie</h2>
          <div className="section-divider" style={{ background: 'var(--gold)' }}></div>
          <p style={{ color: 'rgba(255,255,255,0.85)' }}>This is a grassroots campaign — powered by neighbors, families, and friends. Mail your contribution today.</p>
        </div>
        <div className="support-grid">
          <div className="mail-card">
            <div className="mail-card-eyebrow">
              <Icon.Mail />
              <span>Mail Your Contribution</span>
            </div>
            <div className="mail-card-block">
              <div className="mail-label">Make checks payable to</div>
              <div className="mail-value">Jancie Vinson Campaign</div>
            </div>
            <div className="mail-card-block">
              <div className="mail-label">Send to</div>
              <div className="mail-value">
                {CAMPAIGN_ADDRESS_LINE1}<br />
                {CAMPAIGN_ADDRESS_LINE2}
              </div>
            </div>
            <div className="mail-card-block">
              <div className="mail-label">Questions?</div>
              <div className="mail-value mail-value-sm">
                <a href={`tel:${CAMPAIGN_PHONE_TEL}`}>{CAMPAIGN_PHONE}</a><br />
                <a href={`mailto:${CAMPAIGN_EMAIL}`}>{CAMPAIGN_EMAIL}</a>
              </div>
            </div>
          </div>
          <div className="donate-info">
            <h3>Every gift moves us forward.</h3>
            <p style={{ color: 'rgba(255,255,255,0.88)' }}>
              Please include the following with your check so we can comply with Florida campaign-finance law:
            </p>
            <ul className="donate-info-list">
              <li><Icon.Check /><div><strong>Full legal name</strong></div></li>
              <li><Icon.Check /><div><strong>Home address</strong> (street, city, zip)</div></li>
              <li><Icon.Check /><div><strong>Occupation</strong></div></li>
              <li><Icon.Check /><div><strong>Employer</strong></div></li>
            </ul>
            <p style={{ color: 'rgba(255,255,255,0.88)', marginTop: '20px' }}>
              <strong style={{ color: 'var(--gold)' }}>Suggested levels:</strong> $25 · $50 · $100 · $250 · $500 · $1,000
            </p>
            <p className="donate-disclaimer">
              Contributions to Jancie Vinson for Alachua County School Board are not tax-deductible. Florida law prohibits contributions in excess of $1,000 per individual per election from any source.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Voter Info ---------- */
function VoterInfo() {
  return (
    <section className="section voter-info" id="voter">
      <div className="container">
        <div className="section-title">
          <div className="eyebrow">Mark Your Calendar</div>
          <h2>Key Election Dates</h2>
          <div className="section-divider"></div>
          <p>Make a plan. Vote your values.</p>
        </div>
        <div className="voter-grid">
          <div className="voter-card">
            <div className="eyebrow">Voter Registration Deadline</div>
            <h3>Last Day to Register</h3>
            <div className="date-big">Jul 20</div>
            <div className="date-sub">Monday · 2026</div>
            <p style={{ marginTop: '14px', fontSize: '0.95rem', color: 'var(--ink-soft)' }}>
              Register or update your registration online or in person.
            </p>
            <a href="https://registertovoteflorida.gov" target="_blank" rel="noopener noreferrer">Register to Vote →</a>
          </div>
          <div className="voter-card" style={{ borderLeftColor: 'var(--purple)' }}>
            <div className="eyebrow" style={{ color: 'var(--purple)' }}>Vote-by-Mail / Early Voting</div>
            <h3>Early Voting Period</h3>
            <div className="date-big">Aug 8 – 16</div>
            <div className="date-sub">Saturday – Sunday</div>
            <p style={{ marginTop: '14px', fontSize: '0.95rem', color: 'var(--ink-soft)' }}>
              Request a vote-by-mail ballot or vote early in person at any Alachua County early-voting site.
            </p>
            <a href="https://www.votealachua.com" target="_blank" rel="noopener noreferrer">Find a Location →</a>
          </div>
          <div className="voter-card" style={{ borderLeftColor: 'var(--red)' }}>
            <div className="eyebrow">Primary Election Day</div>
            <h3>Vote at Your Precinct</h3>
            <div className="date-big">Aug 18</div>
            <div className="date-sub">Tuesday · 7am – 7pm</div>
            <p style={{ marginTop: '14px', fontSize: '0.95rem', color: 'var(--ink-soft)' }}>
              Polls open from 7am to 7pm. Bring a valid photo and signature ID.
            </p>
            <a href="https://www.votealachua.com" target="_blank" rel="noopener noreferrer">Find My Precinct →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact ---------- */
function ContactForm() {
  const [form, setForm] = useState({ name: '', email: '', phone: '', subject: 'General', message: '' });
  const [submitted, setSubmitted] = useState(false);
  function handleSubmit(e) {
    e.preventDefault();
    const body =
      `Name: ${form.name}%0D%0A` +
      `Email: ${form.email}%0D%0A` +
      `Phone: ${form.phone}%0D%0A%0D%0A` +
      `${encodeURIComponent(form.message)}`;
    window.location.href = `mailto:${CAMPAIGN_EMAIL}?subject=${encodeURIComponent('[Website] ' + form.subject)}&body=${body}`;
    setSubmitted(true);
  }
  return (
    <form onSubmit={handleSubmit}>
      {submitted && (
        <div className="form-success">
          ✓ Your email client should have opened. If not, please email <strong>{CAMPAIGN_EMAIL}</strong> directly.
        </div>
      )}
      <div className="form-row">
        <div className="form-group">
          <label className="form-label">Name *</label>
          <input className="form-input" required value={form.name}
            onChange={e => setForm({ ...form, name: e.target.value })} />
        </div>
        <div className="form-group">
          <label className="form-label">Email *</label>
          <input className="form-input" type="email" required value={form.email}
            onChange={e => setForm({ ...form, email: e.target.value })} />
        </div>
      </div>
      <div className="form-row">
        <div className="form-group">
          <label className="form-label">Phone</label>
          <input className="form-input" type="tel" value={form.phone}
            onChange={e => setForm({ ...form, phone: e.target.value })} />
        </div>
        <div className="form-group">
          <label className="form-label">I'm reaching out about *</label>
          <select className="form-select" value={form.subject}
            onChange={e => setForm({ ...form, subject: e.target.value })}>
            <option>General</option>
            <option>Yard Sign Request</option>
            <option>Volunteer</option>
            <option>Host a Meet & Greet</option>
            <option>Endorsement</option>
            <option>Press / Media</option>
          </select>
        </div>
      </div>
      <div className="form-group">
        <label className="form-label">Message *</label>
        <textarea className="form-textarea" required value={form.message}
          onChange={e => setForm({ ...form, message: e.target.value })} />
      </div>
      <button type="submit" className="btn btn-primary form-submit">Send Message</button>
    </form>
  );
}

function Contact() {
  return (
    <section className="section contact" id="contact">
      <div className="container">
        <div className="section-title">
          <div className="eyebrow">Get in Touch</div>
          <h2>Contact the Campaign</h2>
          <div className="section-divider"></div>
          <p>Have a question, an idea, or want to get involved? We'd love to hear from you.</p>
        </div>
        <div className="contact-grid">
          <div className="contact-info-card">
            <h3>Reach Out Directly</h3>
            <ul className="contact-info-list">
              <li>
                <Icon.Phone />
                <div>
                  <div style={{ fontFamily: 'var(--font-cond)', fontSize: '0.78rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-soft)' }}>Phone</div>
                  <a href={`tel:${CAMPAIGN_PHONE_TEL}`}>{CAMPAIGN_PHONE}</a>
                </div>
              </li>
              <li>
                <Icon.Mail />
                <div>
                  <div style={{ fontFamily: 'var(--font-cond)', fontSize: '0.78rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-soft)' }}>Email</div>
                  <a href={`mailto:${CAMPAIGN_EMAIL}`}>{CAMPAIGN_EMAIL}</a>
                </div>
              </li>
              <li>
                <Icon.Pin />
                <div>
                  <div style={{ fontFamily: 'var(--font-cond)', fontSize: '0.78rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-soft)' }}>Mailing Address</div>
                  Jancie Vinson Campaign<br />
                  {CAMPAIGN_ADDRESS_LINE1}<br />
                  {CAMPAIGN_ADDRESS_LINE2}
                </div>
              </li>
              <li>
                <Icon.Calendar />
                <div>
                  <div style={{ fontFamily: 'var(--font-cond)', fontSize: '0.78rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-soft)' }}>Election Day</div>
                  Tuesday, August 18, 2026
                </div>
              </li>
            </ul>
            <div style={{ marginTop: '24px' }}>
              <div style={{ fontFamily: 'var(--font-cond)', fontSize: '0.82rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-soft)', marginBottom: '8px' }}>Follow the Campaign</div>
              <div className="social-links">
                <a href="#" aria-label="Facebook"><Icon.FB /></a>
                <a href="#" aria-label="X / Twitter"><Icon.X /></a>
                <a href="#" aria-label="Instagram"><Icon.IG /></a>
              </div>
            </div>
          </div>
          <div>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <div className="footer-brand-logo">
              <img src="assets/jancie-logo-full.png" alt="Jancie Vinson for Alachua County School Board, District 5" />
            </div>
            <p style={{ fontSize: '0.92rem', maxWidth: '360px' }}>
              Lifetime Gainesville resident. Retired law-enforcement officer. Champion of strong, equitable, and accountable public schools.
            </p>
          </div>
          <div>
            <h4>Site</h4>
            <ul>
              <li><a href="#about">About Jancie</a></li>
              <li><a href="#priorities">Priorities</a></li>
              <li><a href="#involved">Get Involved</a></li>
              <li><a href="#support">Support</a></li>
              <li><a href="#voter">Vote</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href={`tel:${CAMPAIGN_PHONE_TEL}`}>{CAMPAIGN_PHONE}</a></li>
              <li><a href={`mailto:${CAMPAIGN_EMAIL}`}>{CAMPAIGN_EMAIL}</a></li>
              <li>{CAMPAIGN_ADDRESS_LINE1}</li>
              <li>{CAMPAIGN_ADDRESS_LINE2}</li>
            </ul>
            <h4 style={{ marginTop: '20px' }}>Vote</h4>
            <ul>
              <li><a href="https://registertovoteflorida.gov" target="_blank" rel="noopener noreferrer">Register to Vote</a></li>
              <li><a href="https://www.votealachua.com" target="_blank" rel="noopener noreferrer">Alachua Supervisor of Elections</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          © 2026 Jancie Vinson for Alachua County School Board · All rights reserved.
          <div className="footer-disclaimer">
            Political advertisement paid for and approved by Jancie Vinson, Candidate for Alachua County School Board, District 5.
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Tweaks Panel ---------- */
function CampaignTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color Palette">
        <TweakRadio
          value={tweaks.palette}
          onChange={v => setTweak('palette', v)}
          options={[
            { value: 'hybrid', label: 'Hybrid (default)' },
            { value: 'patriotic', label: 'Patriotic R/W/B' },
            { value: 'logo', label: 'Logo green/purple' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Headline">
        <TweakRadio
          value={tweaks.headlineVariant}
          onChange={v => setTweak('headlineVariant', v)}
          options={[
            { value: 'protect', label: 'Protect Schools' },
            { value: 'fresh', label: 'Fresh Ideas' },
            { value: 'serve', label: 'Lifetime of Service' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Countdown bar">
        <TweakToggle
          checked={tweaks.showCountdown}
          onChange={v => setTweak('showCountdown', v)}
          label="Show election countdown"
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ---------- Palette switcher ---------- */
function applyPalette(palette) {
  const root = document.documentElement.style;
  if (palette === 'patriotic') {
    root.setProperty('--navy', '#0a2756');
    root.setProperty('--navy-deep', '#061a3d');
    root.setProperty('--red', '#c8102e');
    root.setProperty('--purple', '#0a2756');
    root.setProperty('--green', '#c8102e');
    root.setProperty('--gold', '#f5b700');
  } else if (palette === 'logo') {
    root.setProperty('--navy', '#5e3192');
    root.setProperty('--navy-deep', '#3d1d68');
    root.setProperty('--red', '#00a838');
    root.setProperty('--purple', '#663399');
    root.setProperty('--green', '#00cc00');
    root.setProperty('--gold', '#00cc00');
  } else {
    // hybrid (default)
    root.setProperty('--navy', '#0a2756');
    root.setProperty('--navy-deep', '#061a3d');
    root.setProperty('--red', '#c8102e');
    root.setProperty('--purple', '#5e3192');
    root.setProperty('--green', '#00a838');
    root.setProperty('--gold', '#f5b700');
  }
}

/* ---------- App ---------- */
function App() {
  const [tweaks, setTweaks] = useTweaks(TWEAKS_DEFAULTS);
  const setTweak = (k, v) => {
    if (typeof k === 'object') setTweaks(k);
    else setTweaks({ [k]: v });
  };
  useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);

  return (
    <div>
      <Nav />
      <Hero tweaks={tweaks} />
      {tweaks.showCountdown && <Countdown />}
      <BrandBand />
      <About />
      <Priorities />
      <QuoteSection />
      <SongPlayer />
      <Involved />
      <Support />
      <VoterInfo />
      <Contact />
      <Footer />
      <CampaignTweaks tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

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