// Heed — Page sections
const { useState: useStateP, useEffect: useEffectP } = React;

function Nav({ accent }) {
  const [scrolled, setScrolled] = useStateP(false);
  useEffectP(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-row">
        <a href="#top" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <Wordmark />
        </a>
        <div className="nav-links">
          <a href="#how" className="body-sm nav-link">How it works</a>
          <a href="#demo" className="body-sm nav-link">Demo</a>
          <a href="#pricing" className="body-sm nav-link">Pricing</a>
          <a href="#access" className="btn btn-primary nav-cta">Request access</a>
        </div>
      </div>
    </nav>);

}

function Wordmark() {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <circle cx="10" cy="10" r="9" stroke="#1a1a1a" strokeWidth="1.4" />
        <circle cx="10" cy="10" r="3" fill="#145c4e" />
      </svg>
      <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>Heed</span>
    </span>);

}

function Hero({ headline, subhead }) {
  return (
    <section id="top" className="hero">
      <div className="hero-grain" aria-hidden="true"></div>
      <div className="container hero-grid">
        <div className="hero-copy">
          <div className="eyebrow hero-eyebrow" style={{ marginBottom: 20 }}>For private clinics · Early access</div>
          <h1 className="display hero-display">Heed your customers<br />before Google does.</h1>
          <p className="body-lg hero-sub" style={{ marginTop: 24, maxWidth: 540 }}>
            {subhead}
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href="#access" className="btn btn-primary">Request early access</a>
            <a href="#demo" className="btn btn-text hero-link">
              See it work <span className="arrow">→</span>
            </a>
          </div>
          <div className="hero-trust">
            Built in Toronto · PHIPA-aware · Your data, your customers, never sold.
          </div>
        </div>
        <aside className="hero-visual" aria-hidden="true">
          <div className="hero-visual-inner">
            {/* Background ambient glow */}
            <div className="hero-ambient hero-ambient-1"></div>
            <div className="hero-ambient hero-ambient-2"></div>

            {/* LEFT — SMS prompt */}
            <div className="hero-prompt">
              <div className="hero-prompt-head">
                <span className="hero-sms-avatar">SD</span>
                <span>
                  <div className="hero-sms-name">Sundance Dental</div>
                  <div className="hero-sms-time">SMS · 2:14 PM</div>
                </span>
              </div>
              <div className="hero-prompt-msg">How was your visit with Dr. Chen today?</div>
              <div className="hero-prompt-stars">
                {[1, 2, 3, 4, 5].map((n) => (
                  <svg key={n} width="18" height="18" viewBox="0 0 24 24">
                    <path d="M12 3.5l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17.5l-5.4 2.8 1-6.1L3.2 9.9l6.1-.9L12 3.5z"
                      fill="none" stroke="#d4d4d0" strokeWidth="1.4" strokeLinejoin="round" />
                  </svg>
                ))}
              </div>
            </div>

            {/* RIGHT — 5-star review (Google) */}
            <div className="hero-good-wrap">
              <div className="hero-pill hero-pill-google">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                  <path d="M21.8 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.5c-.2 1.2-1 2.3-2 3v2.5h3.3c1.9-1.8 3-4.4 3-7.3z" fill="#4285F4" />
                  <path d="M12 22c2.7 0 5-1 6.7-2.5l-3.3-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3v2.6C4.7 19.9 8.1 22 12 22z" fill="#34A853" />
                  <path d="M6.4 13.9c-.2-.6-.3-1.2-.3-1.9s.1-1.3.3-1.9V7.5H3C2.4 8.9 2 10.4 2 12s.4 3.1 1 4.5l3.4-2.6z" fill="#FBBC05" />
                  <path d="M12 6c1.5 0 2.8.5 3.8 1.5l2.9-2.9C17 3 14.7 2 12 2 8.1 2 4.7 4.1 3 7.5l3.4 2.6C7.2 7.7 9.4 6 12 6z" fill="#EA4335" />
                </svg>
                <span>Posted to Google</span>
                <span className="hero-pill-checkmark">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M2 6 L5 9 L10 3" stroke="#0a7d4a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </div>
              <div className="hero-review hero-review-good">
                <div className="hero-review-stars">
                  {[1, 2, 3, 4, 5].map((n) => (
                    <svg key={n} width="16" height="16" viewBox="0 0 24 24">
                      <path d="M12 3.5l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17.5l-5.4 2.8 1-6.1L3.2 9.9l6.1-.9L12 3.5z"
                        fill="#b8860b" stroke="#b8860b" strokeWidth="1.4" strokeLinejoin="round" />
                    </svg>
                  ))}
                </div>
                <div className="hero-review-quote">"Genuinely the best dental visit I've had in years."</div>
                <div className="hero-review-foot">— Marcus T.</div>
              </div>
            </div>

            {/* BOTTOM CENTER — 2-star review intercepted */}
            <div className="hero-bad-wrap">
              <div className="hero-review hero-review-bad">
                <div className="hero-review-stars">
                  {[1, 2, 3, 4, 5].map((n) => (
                    <svg key={n} width="14" height="14" viewBox="0 0 24 24">
                      <path d="M12 3.5l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17.5l-5.4 2.8 1-6.1L3.2 9.9l6.1-.9L12 3.5z"
                        fill={n <= 2 ? '#b8860b' : 'none'}
                        stroke={n <= 2 ? '#b8860b' : '#d4d4d0'}
                        strokeWidth="1.4" strokeLinejoin="round" />
                    </svg>
                  ))}
                </div>
                <div className="hero-review-quote">"Waited 40 minutes past my appointment."</div>
                <div className="hero-review-foot">— Sarah M.</div>
              </div>
              <div className="hero-pill hero-pill-private">
                <span className="hero-pill-dot"></span>
                <span>Routed privately</span>
              </div>
            </div>

            {/* Connectors: prompt → good (top), prompt → bad (bottom-left), bad blocked from Google (X) */}
            <svg className="hero-connectors" viewBox="0 0 480 480" preserveAspectRatio="none" aria-hidden="true">
              {/* prompt right edge → good review */}
              <path d="M195 110 Q 240 100, 285 110" stroke="#0a7d4a" strokeWidth="1.5" fill="none" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
              {/* prompt bottom → bad review */}
              <path d="M150 195 Q 160 250, 210 290" stroke="#1a1a1a" strokeWidth="1.5" fill="none" strokeDasharray="3 5" strokeLinecap="round" opacity="0.4" />
            </svg>
          </div>
        </aside>
      </div>
    </section>);

}

function Stats() {
  const items = [
  { v: '70%', l: 'of unhappy customers are intercepted before they reach Google' },
  { v: '4.2 → 4.7', l: 'average Google rating lift across early partners' },
  { v: '< 30s', l: 'median time from visit to customer feedback' }];

  return (
    <section>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          borderTop: '1px solid var(--border)',
          borderBottom: '1px solid var(--border)'
        }}>
          {items.map((it, i) =>
          <div key={i} style={{
            padding: '28px 0',
            borderRight: i < items.length - 1 ? '1px solid var(--border)' : '0',
            paddingLeft: i === 0 ? 0 : 24,
            paddingRight: 24
          }}>
              <div className="tabular" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>
                {it.v}
              </div>
              <div className="body-sm" style={{ marginTop: 6, maxWidth: 280 }}>{it.l}</div>
            </div>
          )}
        </div>
        <p className="caption" style={{ marginTop: 12, color: 'var(--text-muted)' }}>
          Across four design-partner clinics in Toronto, Q1 2026.
        </p>
      </div>
    </section>);

}

function DemoSection() {
  return (
    <section id="demo" className="demo-section">
      <div className="demo-section-bg" aria-hidden="true"></div>
      <div className="container">
        <div className="demo-section-head">
          <div className="demo-section-head-copy">
            <div className="eyebrow">
              <span className="demo-pulse" aria-hidden="true"></span>
              Interactive demo
            </div>
            <h2 className="h1 demo-section-title">
              Try the actual product. <span className="demo-section-title-soft">Right here, right now.</span>
            </h2>
            <p className="body-lg demo-section-sub">
              Tap a star rating below and follow the flow a real customer would take. Switch tabs to see what the clinic team sees on the other side.
            </p>
          </div>
        </div>
        <div className="demo-frame">
          <Demo />
        </div>
        <p className="caption demo-section-foot">
          Live prototype. Not a video. Not a mockup.
        </p>
      </div>
    </section>);

}

function HowItWorks() {
  const steps = [
  { n: '01', t: 'You get a single Heed link.', b: 'One link per clinic. Drop it into your existing post-visit SMS, your email follow-up, or the branded QR stand we ship you. If you can text a customer today, you can run Heed today — no EMR integration, no new software for your front desk to learn.' },
  { n: '02', t: 'Stars decide the path.', b: '4 or 5 stars get a one-tap route to a real Google review. 1 to 3 stars open a private feedback form that goes straight to the clinic.' },
  { n: '03', t: 'You hear the bad news first.', b: 'Negative experiences land in your inbox with the reason, the suggested team, and a draft reply. You get a chance to make it right before anyone else hears about it.' }];

  return (
    <section id="how" className="how-section">
      <div className="container">
        <div className="how-head">
          <div className="eyebrow" style={{ marginBottom: 16 }}>How it works</div>
          <h2 className="h1">A quiet layer between your customers and Google.</h2>
          <p className="body-lg" style={{ marginTop: 12, color: 'var(--text-secondary)', maxWidth: 560 }}>
            Goes live in under 5 minutes. No EMR integration, no software to install, no IT ticket.
          </p>
        </div>
        <div style={{ display: 'grid', gap: 32 }} className="how-step-grid">
          {steps.map((s, i) =>
          <div key={i} className="how-step-row" style={{
            display: 'grid',
            gridTemplateColumns: '64px 1fr',
            gap: 24,
            paddingTop: 32,
            borderTop: '1px solid var(--border)',
            alignItems: 'baseline'
          }}>
              <div className="tabular caption" style={{ color: 'var(--text-muted)', fontSize: 13 }}>{s.n}</div>
              <div className="how-step-body" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 32 }}>
                <h3 className="h2" style={{ maxWidth: 320 }}>{s.t}</h3>
                <p className="body-lg" style={{ margin: 0, maxWidth: 520 }}>{s.b}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Pricing() {
  const features = [
  'Unlimited customer prompts',
  'Private feedback inbox with suggested replies',
  'Google review routing',
  'Clinic dashboard with team activity and trends',
  'Daily digest for the clinic',
  'Branded QR code stand for the front desk, included'];

  return (
    <section id="pricing" style={{ borderTop: '1px solid var(--border)', paddingTop: 'clamp(72px, 12vw, 128px)' }}>
      <div className="container">
        <div style={{ maxWidth: 640, marginBottom: 48, textAlign: 'center', marginInline: 'auto' }}>
          <div className="eyebrow" style={{ marginBottom: 16, justifyContent: 'center' }}>Pricing</div>
          <h2 className="h1">One plan. One price.</h2>
          <p className="body-lg" style={{ marginTop: 16, color: 'var(--text-secondary)' }}>
            Heed is for clinics that want every customer to feel heard. No tiers, no upsells.
          </p>
        </div>
        <div className="card pricing-card" style={{ maxWidth: 480, margin: '0 auto', padding: 32 }}>
          <div className="caption" style={{ color: 'var(--text-muted)' }}>HEED · MONTHLY</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 12 }}>
            <span className="tabular pricing-price" style={{ fontSize: 48, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1 }}>$29</span>
            <span className="body-sm" style={{ color: 'var(--text-muted)' }}>CAD / month, per clinic</span>
          </div>
          <p className="body-sm" style={{ marginTop: 14, color: 'var(--text-secondary)' }}>
            Flat rate. Cancel anytime. First month free for design partners.
          </p>
          <hr className="hr" style={{ margin: '24px 0' }} />
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
            {features.map((f, i) =>
            <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14 }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 4 }}>
                  <path d="M3 8.5l3 3 7-7" stroke="#145c4e" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span>{f}</span>
              </li>
            )}
          </ul>
        </div>
      </div>
    </section>);

}

function FAQ() {
  const [open, setOpen] = useStateP(0);

  const faqs = [
    {
      q: "Doesn't this violate Google's review policy?",
      a: "No. Every customer gets the same prompt: \"How was your visit?\" The star rating decides what the customer sees next, not whether they were asked. Nothing is filtered, no one is screened out, and any customer can still go to Google directly. Heed is a routing layer, not a gate."
    },
    {
      q: "Do we need to integrate with our EMR or scheduling software?",
      a: "No. Heed is a link. Send it however you already follow up with customers — through your existing SMS tool, an email, or the QR stand we send you for the front desk. If you can text a customer today, you can run Heed today."
    },
    {
      q: "Do you ever contact our customers on our behalf?",
      a: "Only the post-visit prompt, sent under your clinic's name. We don't market to your customers, we don't resell their information, and we don't contact them again after that one message."
    },
    {
      q: "Can we cancel anytime?",
      a: "Yes. Month-to-month, no contract, no setup fee. If you leave, we export your feedback history and delete the rest within 30 days."
    }
  ];

  return (
    <section id="faq">
      <div className="container">
        <div className="how-head">
          <div className="eyebrow" style={{ marginBottom: 16 }}>Questions</div>
          <h2 className="h1">The things clinic owners actually ask us.</h2>
        </div>
        <dl style={{ marginTop: 40, marginBottom: 0 }}>
            {faqs.map((faq, i) => (
              <div key={i}>
                <dt style={{ borderTop: '1px solid var(--border)' }}>
                  <button
                    onClick={() => setOpen(open === i ? null : i)}
                    style={{
                      width: '100%',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      background: 'none',
                      border: 'none',
                      padding: '20px 0',
                      cursor: 'pointer',
                      textAlign: 'left',
                      fontSize: 17,
                      fontWeight: 500,
                      color: 'var(--text-primary)',
                      fontFamily: 'inherit',
                      gap: 16
                    }}>
                    <span>{faq.q}</span>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                      style={{ flexShrink: 0, transform: open === i ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease' }}>
                      <path d="M3 6l5 5 5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </button>
                </dt>
                {open === i && (
                  <dd style={{ margin: '0 0 20px', paddingRight: 32, fontSize: 15, lineHeight: 1.7, color: 'var(--text-secondary)' }}>
                    {faq.a}
                  </dd>
                )}
              </div>
            ))}
            <div style={{ borderTop: '1px solid var(--border)' }} />
          </dl>
      </div>
    </section>
  );
}

const SHEET_URL = 'https://script.google.com/macros/s/AKfycbxYYf2mvWBXcuAQxw_4YK8rZ0z-8y9GbC91Dm4dTqE9UCCFHLo4xnX8HrV-bFhSCypW/exec';

function CTA() {
  const [status, setStatus] = useStateP('idle'); // idle | submitting | done | error

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    const name = form.elements[0].value.trim();
    const email = form.elements[1].value.trim();
    setStatus('submitting');
    fetch(SHEET_URL, {
      method: 'POST',
      body: JSON.stringify({ name, email }),
    })
      .then(() => { setStatus('done'); form.reset(); })
      .catch(() => setStatus('error'));
  };

  return (
    <section id="access" style={{ background: 'var(--accent-tint)', paddingTop: 'clamp(36px, 6vw, 64px)', paddingBottom: 'clamp(36px, 6vw, 64px)' }}>
      <div className="container" style={{ paddingTop: 0 }}>
        <div style={{ maxWidth: 640 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Early access</div>
          <h2 className="h1">Built with private clinics in Toronto. Now opening to more.</h2>
          <p className="body-lg" style={{ marginTop: 16 }}>
            We're onboarding a small group of clinics this quarter. If you run a practice and want every customer to feel heard, send a note.
          </p>
          <form
            onSubmit={handleSubmit}
            className="cta-form"
            style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28, maxWidth: 680 }}>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <input
                type="text"
                required
                placeholder="Your name"
                className="ta"
                style={{ flex: 1, minWidth: 200, borderRadius: 12, padding: '14px 18px' }} />
              <input
                type="email"
                required
                placeholder="you@yourclinic.com"
                className="ta"
                style={{ flex: 2, minWidth: 240, borderRadius: 12, padding: '14px 18px' }} />
            </div>

            <div>
              <button
                className="btn btn-primary"
                type="submit"
                disabled={status === 'submitting' || status === 'done'}
                style={{ borderRadius: 12, padding: '14px 28px', fontSize: 16, opacity: status === 'submitting' ? 0.7 : 1 }}>
                {status === 'submitting' ? 'Sending…' : status === 'done' ? 'Sent ✓' : 'Request access'}
              </button>
            </div>
            {status === 'done' && (
              <span className="caption" style={{ color: 'var(--success)' }}>Thanks. We'll be in touch within a day.</span>
            )}
            {status === 'error' && (
              <span className="caption" style={{ color: 'var(--danger)' }}>Something went wrong. Please try again.</span>
            )}
          </form>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--border)', padding: '32px 0 56px' }}>
      <div className="container footer-row" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <Wordmark />
        <div className="caption" style={{ color: 'var(--text-muted)' }}>
          © 2026 Heed. Toronto.
        </div>
        <div style={{ display: 'flex', gap: 20 }}>
        </div>
      </div>
    </footer>);

}

window.Nav = Nav;
window.Hero = Hero;
window.Stats = Stats;
window.DemoSection = DemoSection;
window.HowItWorks = HowItWorks;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.CTA = CTA;
window.Footer = Footer;