// Trust, Testimonials, FAQ, Footer, SignupModal, SuccessScreen

function Trust() {
  const wills = [
    'Tell you it\u2019s an automated call, every single time',
    'Encrypt every recording, end-to-end',
    'Let you cancel anytime — by voice, text, or phone',
    'Connect to 911 immediately if there\u2019s an emergency',
    'Be transparent about what data we keep and why',
  ];
  const wonts = [
    'Pretend Clara is a real person',
    'Sell or share your data with anyone, ever',
    'Pressure you to upgrade or upsell during calls',
    'Send marketing texts you didn\u2019t agree to',
    'Use fake urgency or scare tactics. Period.',
  ];
  return (
    <section className="section" id="trust">
      <div className="container">
        <Reveal>
          <SectionHeader eyebrow="Trust & Privacy" title="What we will and won't do." intro="We serve a generation that has been talked down to, scammed, and patronized for too long. We will not be one more place that does that." align="center" maxWidth={720} />
        </Reveal>

        <div className="trust-grid">
          <Reveal delay={80}>
            <div className="trust-col">
              <div className="trust-head trust-head--will">
                <Icon.Check />
                <span>What we will do</span>
              </div>
              <ul>
                {wills.map((w, i) => <li key={i}><Icon.Check style={{ color: 'var(--accent-deep)' }} /><span>{w}</span></li>)}
              </ul>
            </div>
          </Reveal>
          <Reveal delay={140}>
            <div className="trust-col">
              <div className="trust-head trust-head--wont">
                <Icon.X />
                <span>What we won\u2019t do</span>
              </div>
              <ul>
                {wonts.map((w, i) => <li key={i}><Icon.X style={{ color: 'var(--ink-500)' }} /><span>{w}</span></li>)}
              </ul>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        .trust-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
          margin-top: 56px;
        }
        .trust-col {
          background: var(--cream-100);
          border: 1px solid var(--cream-300);
          border-radius: var(--radius-lg);
          padding: 36px;
        }
        .trust-head {
          display: flex;
          align-items: center;
          gap: 10px;
          font-family: var(--font-display);
          font-size: 24px;
          padding-bottom: 22px;
          border-bottom: 1px solid var(--cream-300);
          margin-bottom: 22px;
        }
        .trust-head--will { color: var(--accent-deep); }
        .trust-head--wont { color: var(--ink-700); }
        .trust-col ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .trust-col li {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          font-size: 17px;
          line-height: 1.45;
        }
        .trust-col li svg { margin-top: 3px; flex-shrink: 0; }
        @media (max-width: 820px) {
          .trust-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

function Testimonials() {
  const quotes = [
    {
      quote: 'Clara called every morning for a week. By Friday, I missed her on the weekend.',
      name: 'Margaret', age: 78, loc: 'Phoenix, AZ',
      tint: 'warm',
      src: 'https://images.unsplash.com/photo-1581579438747-104c53e7a4d6?auto=format&fit=crop&w=200&q=80',
    },
    {
      quote: 'I sleep better knowing someone\u2019s checking in on Mom every day. The text comes in before I\u2019m even out of bed.',
      name: 'Lisa', age: 52, loc: 'Sacramento, CA',
      tint: 'cool',
      src: 'https://images.unsplash.com/photo-1551836022-deb4988cc6c0?auto=format&fit=crop&w=300&q=80',
    },
    {
      quote: 'I told her I don\u2019t need a caretaker. She said she\u2019s not one. We\u2019ve been talking ever since.',
      name: 'Frank', age: 81, loc: 'Tampa, FL',
      tint: 'sun',
      src: 'https://images.unsplash.com/photo-1559963110-71b394e7494d?auto=format&fit=crop&w=200&q=80',
    },
    {
      quote: 'Dad won\u2019t carry a Life Alert. But he\u2019ll pick up a phone for Clara. That\u2019s everything.',
      name: 'Diana', age: 49, loc: 'Austin, TX',
      tint: 'dusk',
      src: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=300&q=80',
    },
  ];
  return (
    <section className="section" id="stories" style={{ background: 'var(--cream-200)' }}>
      <div className="container">
        <Reveal>
          <SectionHeader eyebrow="Stories" title="From the folks who pick up." align="center" maxWidth={580} />
        </Reveal>
        <div className="quotes-grid">
          {quotes.map((q, i) => (
            <Reveal key={i} delay={i * 80}>
              <figure className="quote-card">
                <Photo label={`portrait \u00b7 ${q.name.toLowerCase()}, ${q.age}`} src={q.src} ratio="1/1" tint={q.tint} style={{ borderRadius: '50%', width: 64, height: 64, marginBottom: 0 }} />
                <blockquote>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, color: 'var(--accent)', lineHeight: 0.5, display: 'block', marginBottom: 6 }}>&ldquo;</span>
                  {q.quote}
                </blockquote>
                <figcaption>
                  <strong>{q.name}, {q.age}</strong>
                  <span>{q.loc}</span>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .quotes-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 24px;
          margin-top: 56px;
        }
        .quote-card {
          background: var(--cream-100);
          border: 1px solid var(--cream-300);
          border-radius: var(--radius-lg);
          padding: 36px;
          margin: 0;
          display: grid;
          grid-template-columns: 64px 1fr;
          gap: 24px;
          align-items: start;
        }
        .quote-card blockquote {
          grid-column: 2;
          margin: 0;
          font-family: var(--font-display);
          font-size: 22px;
          line-height: 1.4;
          color: var(--ink-900);
          font-variation-settings: 'opsz' 144, 'SOFT' 50;
          letter-spacing: -0.01em;
        }
        .quote-card figcaption {
          grid-column: 2;
          margin-top: 18px;
          padding-top: 16px;
          border-top: 1px solid var(--cream-300);
          font-size: 14px;
          color: var(--ink-500);
          display: flex;
          flex-direction: column;
          gap: 2px;
        }
        .quote-card figcaption strong {
          color: var(--ink-900);
          font-weight: 500;
          font-size: 15px;
        }
        @media (max-width: 820px) {
          .quotes-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'Is Clara a real person?', a: 'No, Clara is an automated voice assistant. We always tell you that on the first call, and any time you ask. We won\u2019t pretend otherwise.' },
    { q: 'What if I miss a call?', a: 'Clara tries again 30 minutes later. If still no answer, your family contact (if you set one up) gets a text right away.' },
    { q: 'Can I cancel anytime?', a: 'Yes. Text STOP to any message, tell Clara during a call, or call our number. There are no fees, no contracts, no waiting periods.' },
    { q: 'Will my information be sold?', a: 'Never. Period. We don\u2019t sell, share, or trade your data with anyone. Recordings are encrypted and only used to improve Clara\u2019s helpfulness for you.' },
    { q: 'Do you give medical advice?', a: 'No. Clara reminds you about medicines you\u2019ve told her about. For medical questions, please ask your doctor.' },
    { q: 'What languages do you speak?', a: 'English today. Spanish is coming soon — if you\u2019d like to be notified when it\u2019s ready, just tell us when you sign up.' },
    { q: 'Is this Medicare-covered?', a: 'Not currently. Some Medicare Advantage plans cover companion services — ask your plan. We\u2019ll send you a summary letter you can give them.' },
    { q: 'How is this different from a Life Alert button?', a: 'Life Alert is emergency response — you press a button when something\u2019s wrong. Clara is proactive friendship — she calls you, every morning, before anything is wrong.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container" style={{ maxWidth: 820 }}>
        <Reveal>
          <SectionHeader eyebrow="Questions" title="Things people ask us." align="center" maxWidth={580} />
        </Reveal>
        <div className="faq-list">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 50}>
              <details className="faq-item" open={open === i} onClick={(e) => { e.preventDefault(); setOpen(open === i ? -1 : i); }}>
                <summary>
                  <span>{it.q}</span>
                  <span className="faq-icon">{open === i ? <Icon.Minus /> : <Icon.Plus />}</span>
                </summary>
                <div className="faq-body">{it.a}</div>
              </details>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .faq-list {
          margin-top: 48px;
          display: flex;
          flex-direction: column;
          gap: 0;
          border-top: 1px solid var(--cream-300);
        }
        .faq-item {
          border-bottom: 1px solid var(--cream-300);
        }
        .faq-item summary {
          list-style: none;
          padding: 24px 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
          cursor: pointer;
          font-family: var(--font-display);
          font-size: 22px;
          font-variation-settings: 'opsz' 144, 'SOFT' 50;
          color: var(--ink-900);
          letter-spacing: -0.01em;
          transition: color 0.15s;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary:hover { color: var(--accent-deep); }
        .faq-icon {
          flex-shrink: 0;
          width: 36px; height: 36px;
          border-radius: 50%;
          background: var(--cream-200);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--ink-700);
          transition: background 0.15s;
        }
        .faq-item[open] .faq-icon {
          background: var(--accent-soft);
          color: var(--accent-deep);
        }
        .faq-body {
          padding: 0 8px 28px;
          font-size: 18px;
          line-height: 1.55;
          color: var(--ink-700);
          max-width: 720px;
        }
      `}</style>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--ink-900)', color: 'var(--cream-200)', paddingTop: 80, paddingBottom: 48 }}>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="nav-brand" style={{ color: 'var(--cream-100)' }}>
              <img src="./images/Logo.png?v=10" alt="USANRetirement" className="footer-brand-mark" />
            </div>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.55, color: 'var(--ink-300)', maxWidth: 320 }}>
              A friendly call every morning. So no one feels alone.
            </p>
            <a href="tel:18008720000" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 24, fontSize: 22, fontFamily: 'var(--font-display)', color: 'var(--cream-100)', textDecoration: 'none' }}>
              <Icon.Phone /> 1-800-USA-CARE
            </a>
            <div style={{ fontSize: 14, color: 'var(--ink-300)', marginTop: 6 }}>hello@usanretirement.com</div>
          </div>
          <div>
            <div className="footer-head">Service area</div>
            <div style={{ fontSize: 16, color: 'var(--cream-200)', lineHeight: 1.7 }}>
              California<br />Florida<br />Texas<br />Arizona
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-300)', marginTop: 14 }}>More states soon.</div>
          </div>
          <div>
            <div className="footer-head">Company</div>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Partners & senior centers</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-head">Legal</div>
            <ul>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Terms of Service</a></li>
              <li><a href="#">Accessibility</a></li>
              <li><a href="#">Data practices</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>&copy; 2026 USANRetirement, Inc.</div>
          <div style={{ fontSize: 13, color: 'var(--ink-300)', maxWidth: 520, textAlign: 'right' }}>
            We are not a HIPAA-covered entity. We treat your information with strong privacy protection regardless. We are not a medical or emergency service.
          </div>
        </div>
      </div>
      <style>{`
        .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1fr 1fr;
          gap: 48px;
          padding-bottom: 56px;
          border-bottom: 1px solid oklch(0.32 0.01 50);
        }
        .footer-brand-mark {
          height: 80px;
          width: auto;
          display: block;
          object-fit: contain;
        }
        .footer-head {
          font-size: 13px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--ink-300);
          margin-bottom: 18px;
        }
        footer ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        footer ul a {
          color: var(--cream-200);
          text-decoration: none;
          font-size: 16px;
          transition: color 0.15s;
        }
        footer ul a:hover { color: var(--accent); }
        .footer-bottom {
          margin-top: 32px;
          display: flex;
          justify-content: space-between;
          gap: 24px;
          font-size: 14px;
          color: var(--ink-300);
        }
        @media (max-width: 820px) {
          .footer-grid { grid-template-columns: 1fr 1fr; }
          .footer-bottom { flex-direction: column; }
          .footer-bottom > div:last-child { text-align: left; }
        }
      `}</style>
    </footer>
  );
}

// ---------- Signup Modal + Success ----------
const STATES = ['California', 'Florida', 'Texas', 'Arizona'];
const TIMES = ['7:00 AM', '7:30 AM', '8:00 AM', '8:30 AM', '9:00 AM', '9:30 AM', '10:00 AM'];

function SignupModal({ open, onClose }) {
  const [step, setStep] = useState('form'); // form | success
  const [data, setData] = useState({ firstName: '', phone: '', state: '', time: '' });
  const [errors, setErrors] = useState({});

  useEffect(() => {
    if (open) { setStep('form'); setErrors({}); setData({ firstName: '', phone: '', state: '', time: '' }); }
  }, [open]);

  if (!open) return null;

  const validate = () => {
    const e = {};
    if (!data.firstName.trim()) e.firstName = 'Please tell us your first name.';
    const phoneDigits = data.phone.replace(/\D/g, '');
    if (phoneDigits.length < 10) e.phone = 'Please enter a 10-digit phone number.';
    if (!data.state) e.state = 'Please pick a state.';
    if (!data.time) e.time = 'Please pick a time.';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (validate()) setStep('success');
  };

  const formatPhone = (v) => {
    const d = v.replace(/\D/g, '').slice(0, 10);
    if (d.length < 4) return d;
    if (d.length < 7) return `${d.slice(0, 3)}-${d.slice(3)}`;
    return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close"><Icon.X /></button>
        {step === 'form' && (
          <>
            <div className="eyebrow">Free 7-day trial</div>
            <h2 style={{ fontSize: 36 }}>Let\u2019s set up Clara.</h2>
            <p style={{ marginTop: 14, color: 'var(--ink-700)', fontSize: 17 }}>
              Four quick fields. Clara will give you a friendly intro call within five minutes.
            </p>
            <form onSubmit={submit} className="modal-form" noValidate>
              <div className={`field ${errors.firstName ? 'error' : ''}`}>
                <label>First name</label>
                <input type="text" value={data.firstName} onChange={(e) => setData({ ...data, firstName: e.target.value })} placeholder="Margaret" />
                {errors.firstName && <div className="field-error">{errors.firstName}</div>}
              </div>
              <div className={`field ${errors.phone ? 'error' : ''}`}>
                <label>Phone number</label>
                <input type="tel" value={data.phone} onChange={(e) => setData({ ...data, phone: formatPhone(e.target.value) })} placeholder="555-123-4567" />
                {errors.phone && <div className="field-error">{errors.phone}</div>}
              </div>
              <div className={`field ${errors.state ? 'error' : ''}`}>
                <label>State</label>
                <select value={data.state} onChange={(e) => setData({ ...data, state: e.target.value })}>
                  <option value="">Choose your state\u2026</option>
                  {STATES.map((s) => <option key={s} value={s}>{s}</option>)}
                </select>
                {errors.state && <div className="field-error">{errors.state}</div>}
              </div>
              <div className={`field ${errors.time ? 'error' : ''}`}>
                <label>Best time for the morning call</label>
                <select value={data.time} onChange={(e) => setData({ ...data, time: e.target.value })}>
                  <option value="">Pick a time\u2026</option>
                  {TIMES.map((t) => <option key={t} value={t}>{t}</option>)}
                </select>
                {errors.time && <div className="field-error">{errors.time}</div>}
              </div>
              <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: 8 }}>
                Start free trial <Icon.ArrowRight />
              </button>
              <p style={{ fontSize: 13, color: 'var(--ink-500)', lineHeight: 1.5, marginTop: 12 }}>
                By submitting, you agree to receive a confirmation call from Clara, our automated assistant. Reply STOP to opt out at any time. No card needed.
              </p>
            </form>
          </>
        )}
        {step === 'success' && (
          <div style={{ textAlign: 'center', paddingTop: 12 }}>
            <div style={{ width: 88, height: 88, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
              <Icon.Check width="44" height="44" />
            </div>
            <h2 style={{ fontSize: 36 }}>You\u2019re all set, {data.firstName}.</h2>
            <p style={{ marginTop: 14, color: 'var(--ink-700)', fontSize: 18, maxWidth: 420, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.55 }}>
              Clara will call you at <strong>{data.phone}</strong> within the next 5 minutes for a quick hello. Tomorrow morning, your first real check-in arrives at <strong>{data.time}</strong>.
            </p>
            <div style={{ marginTop: 28, padding: 20, background: 'var(--cream-200)', borderRadius: 16, fontSize: 15, color: 'var(--ink-700)', textAlign: 'left' }}>
              <strong style={{ color: 'var(--ink-900)' }}>What happens next:</strong>
              <ol style={{ margin: '10px 0 0', paddingLeft: 20, lineHeight: 1.7 }}>
                <li>Clara calls in ~5 min to say hello</li>
                <li>Daily check-ins start tomorrow at {data.time}</li>
                <li>Free for 7 days. No card on file.</li>
              </ol>
            </div>
            <button className="btn btn-secondary" style={{ marginTop: 28 }} onClick={onClose}>Close</button>
          </div>
        )}
      </div>
      <style>{`
        .modal-back {
          position: fixed; inset: 0;
          background: oklch(0.22 0.012 50 / 0.45);
          backdrop-filter: blur(8px);
          z-index: 200;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 24px;
          animation: fadeBack 0.25s ease;
        }
        .modal {
          position: relative;
          width: 100%;
          max-width: 520px;
          background: var(--cream-100);
          border-radius: var(--radius-lg);
          padding: 44px 40px 36px;
          box-shadow: 0 30px 80px oklch(0.22 0.012 50 / 0.3);
          max-height: 92vh;
          overflow-y: auto;
          animation: pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1);
        }
        .modal-close {
          position: absolute;
          top: 18px; right: 18px;
          width: 36px; height: 36px;
          border-radius: 50%;
          background: var(--cream-200);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--ink-700);
        }
        .modal-close:hover { background: var(--cream-300); }
        .modal-form {
          margin-top: 28px;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        @keyframes fadeBack { from { opacity: 0; } to { opacity: 1; } }
        @keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
      `}</style>
    </div>
  );
}

Object.assign(window, { Trust, Testimonials, FAQ, Footer, SignupModal });
