// Hero, Problem, Clara sections
const heroHeadlines = {
  alone: {
    headline: "A friendly call every morning.\nSo no one feels alone.",
    sub: "Clara, our automated voice assistant, calls your loved one every morning — to chat, remind them about medicines, and text family if they don't pick up.",
  },
  peace: {
    headline: "Daily check-ins for older adults.\nPeace of mind for families.",
    sub: "A warm phone call every morning. Medication reminders. Family alerts if Mom or Dad doesn't pick up. The first seven days are free.",
  },
  mom: {
    headline: "Mom's not alone today.\nAnd neither are you.",
    sub: "Clara calls your parent every morning to say hello, remind them about meds, and let you know how the call went — by text, the moment it ends.",
  },
};

function Hero({ tone = 'alone', onSignup }) {
  const copy = heroHeadlines[tone] || heroHeadlines.alone;
  return (
    <section className="section" style={{ paddingTop: 'var(--space-6)', paddingBottom: 'var(--space-7)' }}>
      <div className="container hero-grid">
        <div className="hero-copy">
          <div className="eyebrow">
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }}></span>
              Now serving CA · FL · TX · AZ
            </span>
          </div>
          <h1 style={{ whiteSpace: 'pre-line' }}>{copy.headline}</h1>
          <p style={{ marginTop: 28, fontSize: 21, color: 'var(--ink-700)', maxWidth: 540, lineHeight: 1.5 }}>
            {copy.sub}
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 36 }}>
            <button className="btn btn-primary" onClick={onSignup}>
              Start Free 7-Day Trial <Icon.ArrowRight />
            </button>
            <a href="tel:18008720000" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
              <Icon.Phone /> 1-800-USA-CARE
            </a>
          </div>
          <p style={{ marginTop: 22, fontSize: 15, color: 'var(--ink-500)' }}>
            No card needed · Cancel anytime by texting STOP
          </p>
        </div>

        <div className="hero-visual">
          <div className="hero-split-grid">
            {/* Left Column - Margaret receiving call */}
            <div className="hero-column">
              <Photo
                label="Margaret receiving morning call"
                ratio="3/4"
                tint="warm"
                src="./images/margaret.jpg"
                style={{ borderRadius: 'var(--radius-lg)' }}
              />
              <div className="hero-card hero-card-call">
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div className="phone-icon-animated">
                      <Icon.Phone width="18" height="18" style={{ color: 'var(--accent-deep)' }} />
                    </div>
                    <div>
                      <div style={{ fontSize: 13, color: 'var(--ink-500)', fontWeight: 500 }}>Incoming call · 8:02 AM</div>
                      <div style={{ fontSize: 16, fontWeight: 500, marginTop: 2 }}>Clara</div>
                    </div>
                  </div>
                  <div className="live-badge">LIVE</div>
                </div>
                <Waveform bars={18} height={36} barWidth={3} gap={3} />
                <div style={{ fontSize: 13, color: 'var(--ink-700)', marginTop: 10, fontStyle: 'italic' }}>
                  "Good morning, Margaret. How'd you sleep?"
                </div>
              </div>
            </div>

            {/* Arrow between columns */}
            <div className="hero-arrow">
              <Icon.ArrowRight width="28" height="28" style={{ color: 'var(--accent)' }} />
            </div>

            {/* Right Column - Lisa receiving SMS */}
            <div className="hero-column">
              <Photo
                label="Lisa checking phone notification"
                ratio="3/4"
                tint="cool"
                src="./images/lisa.png"
                style={{ borderRadius: 'var(--radius-lg)' }}
              />
              <div className="hero-card hero-card-sms">
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
                  <Icon.Chat width="16" height="16" style={{ color: 'var(--accent-deep)' }} />
                  <div style={{ fontSize: 11, color: 'var(--accent-deep)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Family notification</div>
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)', fontWeight: 500, marginBottom: 8 }}>To Lisa (daughter) · 8:09 AM</div>
                <div style={{ fontSize: 15, lineHeight: 1.45, color: 'var(--ink-700)' }}>
                  Mom picked up. She slept well, took her morning meds, asked about the weather. All good 💛
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero-grid {
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: 80px;
          align-items: center;
        }
        .hero-split-grid {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          gap: 20px;
          align-items: start;
        }
        .hero-column {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .hero-arrow {
          display: flex;
          align-items: center;
          justify-content: center;
          padding-top: 180px;
          opacity: 0.6;
        }
        .hero-card {
          background: var(--cream-100);
          border-radius: var(--radius-md);
          padding: 18px 20px;
          box-shadow: var(--shadow-card);
          border: 1px solid var(--cream-300);
        }
        .hero-card-call {
          border-left: 3px solid var(--accent);
        }
        .hero-card-sms {
          border-left: 3px solid var(--accent);
        }
        .phone-icon-animated {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          animation: phone-shake 3s ease-in-out infinite;
        }
        .phone-icon-animated::before,
        .phone-icon-animated::after {
          content: '';
          position: absolute;
          border: 2px solid var(--accent);
          border-radius: 50%;
          opacity: 0;
        }
        .phone-icon-animated::before {
          width: 28px;
          height: 28px;
          animation: phone-ripple 2s ease-out infinite;
        }
        .phone-icon-animated::after {
          width: 28px;
          height: 28px;
          animation: phone-ripple 2s ease-out infinite 1s;
        }
        @keyframes phone-shake {
          0%, 100% { transform: rotate(0deg); }
          10% { transform: rotate(-15deg); }
          20% { transform: rotate(15deg); }
          30% { transform: rotate(-10deg); }
          40% { transform: rotate(10deg); }
          50%, 95% { transform: rotate(0deg); }
        }
        @keyframes phone-ripple {
          0% {
            width: 28px;
            height: 28px;
            opacity: 0.6;
          }
          100% {
            width: 50px;
            height: 50px;
            opacity: 0;
          }
        }
        .live-badge {
          background: var(--accent);
          color: var(--accent-text);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.08em;
          padding: 4px 8px;
          border-radius: 6px;
          animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.7; }
        }
        @media (max-width: 920px) {
          .hero-grid { grid-template-columns: 1fr; gap: 56px; }
          .hero-split-grid {
            grid-template-columns: 1fr;
            gap: 32px;
          }
          .hero-arrow {
            display: none;
          }
        }
      `}</style>
    </section>
  );
}

function Problem() {
  return (
    <section className="section" style={{ background: 'var(--cream-200)' }} id="problem">
      <div className="container">
        <Reveal>
          <SectionHeader
            eyebrow="Why we built this"
            title={<>The days can feel long when family lives far.</>}
            intro="Most older adults don't want a panic button. They want someone to check in. Someone to say good morning. Someone to ask how they slept. We built USANRetirement so no one has to choose between independence and connection."
            maxWidth={780}
          />
        </Reveal>

        <Reveal delay={120}>
          <div className="stat-grid">
            <div className="stat">
              <div className="stat-num">1 in 4</div>
              <div className="stat-label">Adults 65+ in the U.S. experience social isolation.</div>
              <div className="stat-source">CDC, 2023</div>
            </div>
            <div className="stat">
              <div className="stat-num">28%</div>
              <div className="stat-label">Of adults 65+ live alone — the highest of any age group.</div>
              <div className="stat-source">U.S. Census</div>
            </div>
            <div className="stat">
              <div className="stat-num">43%</div>
              <div className="stat-label">Of adults 45–60 are caregivers worried about a parent living alone.</div>
              <div className="stat-source">AARP / NAC, 2020</div>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        .stat-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 28px;
          margin-top: 64px;
        }
        .stat {
          padding: 36px 32px;
          background: var(--cream-100);
          border-radius: var(--radius-lg);
          border: 1px solid var(--cream-300);
        }
        .stat-num {
          font-family: var(--font-display);
          font-size: clamp(48px, 5.5vw, 72px);
          line-height: 1;
          color: var(--accent-deep);
          font-variation-settings: 'opsz' 144, 'SOFT' 80;
          letter-spacing: -0.03em;
          margin-bottom: 18px;
        }
        .stat-label {
          font-size: 18px;
          line-height: 1.45;
          color: var(--ink-900);
          margin-bottom: 12px;
        }
        .stat-source {
          font-size: 13px;
          color: var(--ink-500);
          letter-spacing: 0.04em;
          text-transform: uppercase;
        }
        @media (max-width: 820px) {
          .stat-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

function ClaraSection() {
  const items = [
    { icon: 'Sun', text: 'Calls every morning to say good morning and check in' },
    { icon: 'Pill', text: 'Reminds about medications — only the ones you tell her about' },
    { icon: 'Chat', text: 'Chats about anything on your mind, however long you want' },
    { icon: 'Search', text: 'Looks up weather, pharmacy hours, or special dates' },
    { icon: 'Bell', text: "Texts your family if you don't pick up - never automatically alone" },
  ];

  return (
    <section className="section" id="clara">
      <div className="container">
        <div className="clara-grid">
          <Reveal>
            <div className="clara-visual-wrap">
              <div className="clara-card">
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'radial-gradient(circle at 35% 35%, var(--accent) 0%, var(--accent-deep) 100%)' }}></div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1 }}>Clara</div>
                    <div style={{ fontSize: 14, color: 'var(--ink-500)', marginTop: 4 }}>Automated voice assistant</div>
                  </div>
                </div>
                <Waveform bars={36} height={88} barWidth={4} gap={4} />
                <div style={{ marginTop: 22, fontSize: 16, lineHeight: 1.45, color: 'var(--ink-700)', fontStyle: 'italic', borderLeft: '2px solid var(--accent-soft)', paddingLeft: 14 }}>
                  "Good morning, Margaret. The forecast is sunny, 72 degrees. Did you sleep okay?"
                </div>
                <div style={{ marginTop: 18, padding: '10px 14px', background: 'var(--cream-200)', borderRadius: 12, fontSize: 13, color: 'var(--ink-700)', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon.Lock width="16" height="16" />
                  Always announced as automated. Never pretends to be human.
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={100}>
            <div>
              <div className="eyebrow">Meet Clara</div>
              <h2>Your daily morning call —<br />warm, patient, real handy.</h2>
              <p style={{ marginTop: 22, color: 'var(--ink-700)', fontSize: 19, lineHeight: 1.55 }}>
                Clara is an automated voice assistant — not a real person, and we'll always tell you that. But she's built for older adults who want company, not a panic button. Here's what she does:
              </p>
              <ul className="clara-list">
                {items.map((it, i) => {
                  const I = Icon[it.icon];
                  return (
                    <li key={i}>
                      <span className="clara-icon"><I /></span>
                      <span>{it.text}</span>
                    </li>
                  );
                })}
              </ul>
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        .clara-grid {
          display: grid;
          grid-template-columns: 1fr 1.1fr;
          gap: 80px;
          align-items: center;
        }
        .clara-card {
          background: var(--cream-100);
          border: 1px solid var(--cream-300);
          border-radius: var(--radius-lg);
          padding: 32px;
          box-shadow: var(--shadow-card);
          max-width: 440px;
        }
        .clara-list {
          list-style: none;
          padding: 0;
          margin: 36px 0 0;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .clara-list li {
          display: flex;
          align-items: flex-start;
          gap: 16px;
          font-size: 18px;
          line-height: 1.45;
        }
        .clara-icon {
          flex-shrink: 0;
          width: 44px; height: 44px;
          border-radius: 12px;
          background: var(--accent-soft);
          color: var(--accent-deep);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        @media (max-width: 920px) {
          .clara-grid { grid-template-columns: 1fr; gap: 56px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, Problem, ClaraSection, heroHeadlines });
