// Final CTA + Footer.

const FinalCTA = () => {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email.includes('@')) setSubmitted(true);
  };
  return (
    <section id="trial" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="sun-glow" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', opacity: 0.5 }}></div>

      <div className="container-narrow" style={{ position: 'relative', textAlign: 'center' }}>
        <div className="reveal" style={{ marginBottom: 32, display: 'inline-flex' }}>
          <div className="logo-mark" style={{ width: 44, height: 44, fontSize: 26, animation: 'pulse-soft 3s ease-in-out infinite' }}>日</div>
        </div>

        <h2 className="reveal" style={{ marginBottom: 24, fontSize: 'clamp(40px, 5vw, 72px)' }}>
          Stop losing cases to confusion.
          <br/>
          <span className="serif" style={{ color: 'var(--gold-deep)' }}>Start sending plans patients understand.</span>
        </h2>

        <p className="lede reveal" style={{ margin: '0 auto 40px' }}>
          14-day free trial. No credit card. Your first ten patient plans are
          free even after the trial ends.
        </p>

        <form className="reveal" onSubmit={submit} style={{
          display: 'flex',
          gap: 8,
          padding: 8,
          background: 'var(--card-solid)',
          border: '1px solid var(--line-strong)',
          borderRadius: 14,
          maxWidth: 520,
          margin: '0 auto 16px',
          boxShadow: 'var(--shadow-md)',
        }}>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="dr.you@clinic.ca"
            style={{
              flex: 1,
              padding: '12px 16px',
              border: 'none',
              outline: 'none',
              background: 'transparent',
              font: 'inherit',
              color: 'var(--fg)',
              fontSize: 15,
            }}
          />
          <button type="submit" className="btn btn-primary btn-lg" style={{ padding: '12px 22px' }}>
            {submitted ? <><Icon name="check" size={14} /> Check your inbox</> : <>Start free trial <Icon name="arrow-right" size={14} /></>}
          </button>
        </form>
        <p className="small reveal">
          Or <a href="#demo" className="ul">book a 15-minute demo</a> with our team — we'll create your first patient plan with you, live.
        </p>
      </div>
    </section>
  );
};

const Footer = () => {
  const cols = [
    {
      title: 'Product',
      links: ['How it works', 'Patient view', 'ROI calculator', 'Features', 'Pricing', 'Changelog'],
    },
    {
      title: 'For specialists',
      links: ['Oral surgeons', 'Periodontists', 'Endodontists', 'Prosthodontists', 'Treatment coordinators'],
    },
    {
      title: 'Company',
      links: ['About', 'Customers', 'Careers', 'Press kit', 'Contact'],
    },
    {
      title: 'Resources',
      links: ['Acceptance benchmarks', 'Specialist referral guide', 'Help center', 'Security & PIPEDA'],
    },
  ];
  return (
    <footer style={{ borderTop: '1px solid var(--line)', paddingTop: 64, paddingBottom: 48, background: 'var(--bg-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(4, minmax(0, 1fr))', gap: 48 }}>
          <div>
            <Logo />
            <p style={{ marginTop: 16, fontSize: 13, lineHeight: 1.55, maxWidth: '28ch' }}>
              Hinata makes specialist treatment plans patients actually want to read.
            </p>
            <div className="mono" style={{ marginTop: 24, fontSize: 11, color: 'var(--fg-faint)' }}>
              Made in Toronto
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-faint)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 16 }}>{c.title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.links.map((l) => (
                  <a key={l} href={`#${l.toLowerCase().replace(/\s+/g, '-')}`} style={{ fontSize: 13, color: 'var(--fg-mute)' }}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 80,
          paddingTop: 32,
          borderTop: '1px solid var(--line)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 24,
          flexWrap: 'wrap',
        }}>
          <div className="small">© 2026 Hinata Inc. · All rights reserved.</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#privacy" className="small">Privacy</a>
            <a href="#terms" className="small">Terms</a>
            <a href="#security" className="small">Security</a>
            <a href="#status" className="small">
              <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: '#3aa66e', marginRight: 6, verticalAlign: 'middle' }}></span>
              All systems operational
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { FinalCTA, Footer });