// Landing page components for Corda

// ── Launch state ──────────────────────────────────────────
// Flip to `true` the day the iOS App Store listing is public. While false,
// the hero stays a waitlist-capture page (current behaviour); when true, the
// primary CTA becomes the App Store badge and the waitlist demotes to the
// Android / not-ready fallback. Keep this OFF until the listing is live.
const LAUNCH_LIVE = false;

// App Store destination for the post-launch CTA. UTM tags let PostHog + the
// weekly growth report attribute web → install traffic; swap in the real id
// when the listing exists. `pt`/`ct` are App Store Connect campaign tokens.
const APP_STORE_URL =
  'https://apps.apple.com/app/idREPLACE_WITH_APP_ID' +
  '?utm_source=landing&utm_medium=web&utm_campaign=launch&pt=REPLACE&ct=landing-hero';

// ── Waitlist helpers ──────────────────────────────────────
// API host. Lives on a separate Vercel project from the landing. Use the
// `api-nine-xi-52` alias because it bypasses Vercel's deployment protection
// (the `api-mcaseyrivers` alias returns the Vercel SSO HTML for public
// requests, which would break the landing form silently).
const API_BASE = 'https://api-nine-xi-52.vercel.app';

// Reads ?confirmed=… (set by the API's /waitlist/confirm redirect) once on
// mount and strips it so reload doesn't keep re-firing the banner.
const useConfirmedState = () => {
  const [state, setState] = React.useState(null);
  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    const c = params.get('confirmed');
    if (!c) return;
    setState(c);
    // Fire the double-opt-in conversion. `confirmed=1` is the success branch of
    // the /waitlist/confirm redirect; the other values ('already', 'expired',
    // 'invalid', 'unsubscribed') are not new confirmations. Track the outcome
    // on all of them so the funnel can see confirm attempts vs. successes.
    if (window.cordaTrack) {
      if (c === '1') window.cordaTrack('email_confirmed', { surface: 'landing' });
      window.cordaTrack('waitlist_confirm_result', { surface: 'landing', outcome: c });
    }
    const url = new URL(window.location.href);
    url.searchParams.delete('confirmed');
    window.history.replaceState({}, '', url.toString());
  }, []);
  return state;
};

// NOTE: the waitlist signup is intentionally email-only now (friction
// reduction), so the former caregiver-segment / primary-pain / referral-source
// option lists were removed along with the selects that used them. Acquisition
// attribution still flows from UTMs + referrer via waitlistAttributionPayload().

const waitlistAttributionPayload = () => {
  if (typeof window === 'undefined') return {};
  const params = new URLSearchParams(window.location.search);
  return {
    referrer: document.referrer || undefined,
    landingPath: `${window.location.pathname}${window.location.search}`,
    utm: {
      source: params.get('utm_source') || undefined,
      medium: params.get('utm_medium') || undefined,
      campaign: params.get('utm_campaign') || undefined,
      content: params.get('utm_content') || undefined,
      term: params.get('utm_term') || undefined,
    },
    leadMagnet: params.get('lead_magnet') || params.get('resource') || undefined,
  };
};

// ── Early-access note ─────────────────────────────────────
// We intentionally do NOT surface a live signup count or a "launch at N
// families" countdown (founder decision): no waitlist-size tracking in the UI,
// and no implication that the app goes live at a specific number. The line just
// reassures that early access is on its way.
const EarlyAccessNote = () => (
  <div style={{ marginTop: 16, maxWidth: 480, fontSize: 12.5, color: 'var(--ink-3)' }}>
    <span style={{ color: 'var(--sage-deep)', fontWeight: 500 }}>Early access is coming soon</span> — we'll email you the moment it opens.
  </div>
);

// Dismissible banner shown above the hero after the user confirms their opt-in.
const ConfirmedBanner = () => {
  const state = useConfirmedState();
  const [dismissed, setDismissed] = React.useState(false);
  if (!state || dismissed) return null;
  const messages = {
    '1':            { kind: 'success', text: "You're on the list. Welcome — we'll be in touch when the doors open." },
    'already':      { kind: 'info',    text: "You were already on the list. Thanks for double-checking." },
    'expired':      { kind: 'warning', text: 'That confirmation link expired. Re-enter your email below to get a fresh one.' },
    'invalid':      { kind: 'warning', text: "That link isn't valid. Open the most recent confirmation email or re-enter your email below." },
    'unsubscribed': { kind: 'info',    text: 'That email is unsubscribed. Re-enter below if you want to opt back in.' },
  };
  const m = messages[state] || messages['invalid'];
  const palette = {
    success: { bg: 'var(--sage-tint)', border: 'var(--sage-soft)', fg: 'var(--sage-ink)' },
    info:    { bg: 'var(--surface)',   border: 'var(--hairline)',  fg: 'var(--ink-2)' },
    warning: { bg: 'var(--surface)',   border: 'var(--hairline)',  fg: 'var(--ink)' },
  }[m.kind];
  return (
    <div style={{
      maxWidth: 1280, margin: '24px auto 0', padding: '14px 20px',
      borderRadius: 14, background: palette.bg, border: `1px solid ${palette.border}`,
      display: 'flex', alignItems: 'center', gap: 12,
      fontSize: 14, color: palette.fg,
    }}>
      <span style={{
        width: 22, height: 22, borderRadius: '50%', background: 'var(--sage-deep)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Icon name="check" size={12} color="var(--bg)" />
      </span>
      <span style={{ flex: 1, lineHeight: 1.55 }}>{m.text}</span>
      <button
        onClick={() => setDismissed(true)}
        style={{
          appearance: 'none', background: 'transparent', border: 'none',
          padding: 6, color: 'var(--ink-3)', cursor: 'pointer', fontFamily: 'inherit',
          fontSize: 18, lineHeight: 1,
        }}
        aria-label="Dismiss"
      >×</button>
    </div>
  );
};

// ── Waitlist email form ───────────────────────────────────
// `source` tags the signup row in Supabase so we can tell which landing
// variant drove it (e.g. 'landing' = multi-person home, 'landing-one' = /one).
const WaitlistForm = ({ size = 'hero', source = 'landing' }) => {
  const [email, setEmail]   = React.useState('');
  const [status, setStatus] = React.useState('idle');
  // Email-only by design: the signup asks for nothing but an email address to
  // keep friction (and drop-off) as low as possible. The optional segmentation
  // selects were removed deliberately — attribution still flows from UTMs +
  // referrer via waitlistAttributionPayload().
  // Fires `waitlist_form_started` once, on the first keystroke, so the funnel
  // can measure form-start → submit drop-off.
  const startedRef = React.useRef(false);
  const isHero = size === 'hero';

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email || !/\S+@\S+\.\S+/.test(email)) return;
    setStatus('loading');
    const attribution = waitlistAttributionPayload();
    const payload = {
      email,
      source,
      ...attribution,
    };
    window.cordaTrack && window.cordaTrack('waitlist_signup_submitted', {
      source,
      utm_source: attribution.utm && attribution.utm.source || null,
      utm_campaign: attribution.utm && attribution.utm.campaign || null,
    });
    try {
      const resp = await fetch(`${API_BASE}/api/waitlist`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const json = await resp.json().catch(() => ({}));
      if (!resp.ok) {
        setStatus('error');
        window.cordaTrack && window.cordaTrack('waitlist_signup_failed', {
          source,
          status: resp.status,
        });
        return;
      }
      // API wraps as {data: {sent, alreadyConfirmed}}; tolerate either shape.
      // IMPORTANT: do NOT name this `payload` — the request body declared above
      // is also named `payload` and is read by `JSON.stringify(payload)` in the
      // fetch above. A second `const payload` here shadows it; under the
      // in-browser Babel build the fetch then read the still-uninitialized inner
      // binding, sending `body: undefined` → API 400 "Request body is required".
      const result = json?.data ?? json;
      setStatus(result && result.alreadyConfirmed ? 'already' : 'pending');
      window.cordaTrack && window.cordaTrack('waitlist_signup_result', {
        source,
        outcome: result && result.alreadyConfirmed ? 'already_confirmed' : 'confirmation_email_sent',
      });
    } catch {
      setStatus('error');
      window.cordaTrack && window.cordaTrack('waitlist_signup_failed', {
        source,
        status: 'network',
      });
    }
  };

  const handleShare = (e) => {
    e.preventDefault();
    if (navigator.share) {
      navigator.share({ url: location.href, title: 'Corda', text: 'I just joined the Corda waitlist — caregiving, finally held.' });
    } else {
      navigator.clipboard.writeText(location.href);
    }
  };

  if (status === 'pending' || status === 'already') {
    const isAlready = status === 'already';
    return (
      <div>
        <div style={{
          display: 'inline-flex', flexDirection: 'column', gap: 6, textAlign: 'left',
          padding: isHero ? '20px 24px' : '16px 20px',
          borderRadius: isHero ? 18 : 14, maxWidth: isHero ? 480 : 420,
          background: 'var(--sage-tint)', border: '1px solid var(--sage-soft)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span style={{
              width: 22, height: 22, borderRadius: '50%', background: 'var(--sage-deep)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
            }}>
              <Icon name={isAlready ? 'check' : 'mail'} size={12} color="var(--bg)" />
            </span>
            <span style={{ fontSize: isHero ? 16 : 14.5, fontWeight: 600, color: 'var(--sage-ink)' }}>
              {isAlready ? "You're already on the list." : 'Check your inbox to confirm your spot.'}
            </span>
          </div>
          <p style={{ margin: 0, fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5, paddingLeft: 31 }}>
            {isAlready
              ? <>Thanks for double-checking. <a href="#" onClick={handleShare} style={{ color: 'var(--sage-deep)', fontWeight: 500, textDecoration: 'underline' }}>Share with a fellow caregiver.</a></>
              : <>We sent a confirmation email to <strong style={{ color: 'var(--ink)' }}>{email}</strong>. You're not on the list until you tap the button inside.</>}
          </p>
        </div>
        {isHero && <EarlyAccessNote />}
      </div>
    );
  }

  const inputStyle = {
    width: '100%', boxSizing: 'border-box',
    padding: isHero ? '14px 18px' : '12px 16px',
    borderRadius: isHero ? 14 : 12, border: '1px solid var(--hairline)',
    background: 'var(--surface)', fontSize: isHero ? 15 : 14,
    fontFamily: 'inherit', color: 'var(--ink)', outline: 'none',
    letterSpacing: -0.1, minWidth: 0
  };

  // Matches the topbar / hero primary buttons: sage-deep pill, white text.
  const btnStyle = {
    width: '100%', boxSizing: 'border-box',
    padding: isHero ? '15px 24px' : '12px 18px',
    borderRadius: 999, border: 'none',
    background: 'var(--sage-deep)', color: '#fff',
    fontSize: isHero ? 16 : 14, fontWeight: 600,
    fontFamily: 'inherit', cursor: status === 'loading' ? 'default' : 'pointer',
    letterSpacing: '-0.01em', whiteSpace: 'nowrap',
    boxShadow: '0 6px 20px rgba(68,89,79,.22)',
    opacity: status === 'loading' ? 0.65 : 1, transition: 'opacity .2s'
  };

  return (
    <div>
      <form onSubmit={handleSubmit} className="corda-waitlist-form" style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: isHero ? 480 : 420 }}>
        <input
          type="email" value={email}
          onChange={(e) => {
            setEmail(e.target.value);
            if (e.target.value.trim() && !startedRef.current) {
              startedRef.current = true;
              window.cordaTrack && window.cordaTrack('waitlist_form_started', { source });
            }
          }}
          placeholder="your@email.com" style={inputStyle} aria-label="Email address"
        />
        <button type="submit" style={btnStyle} disabled={status === 'loading'}>
          {status === 'loading' ? 'Sending…' : status === 'error' ? 'Try again' : 'Get early access'}
        </button>
      </form>
      {status === 'error' && (
        <p style={{ marginTop: 10, fontSize: 13, color: 'var(--clay)' }}>
          Something went wrong. Please try again in a moment.
        </p>
      )}
      {isHero && <EarlyAccessNote />}
    </div>
  );
};

// ── Nav ────────────────────────────────────────────────────
const LandingNav = () =>
<nav className="corda-nav" style={{
  position: 'sticky', top: 0, zIndex: 100,
  padding: '18px 48px',
  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  background: 'rgba(245, 242, 235, 0.78)',
  backdropFilter: 'saturate(180%) blur(18px)',
  WebkitBackdropFilter: 'saturate(180%) blur(18px)',
  borderBottom: '0.5px solid var(--hairline-soft)'
}}>
    <a href="/" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'var(--ink)' }}>
      <Logomark size={30} />
      <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 22, letterSpacing: '-0.04em' }}>corda</span>
    </a>
    <div className="corda-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
      {[
    { label: 'How it works', href: '#how' },
    { label: 'Quiz', href: '/quiz.html' },
    { label: 'Blog', href: '/blog.html' },
    { label: 'Pricing', href: '#pricing' }].
    map((l) =>
    <a key={l.label} href={l.href} style={{
      fontSize: 14, fontWeight: 500, color: 'var(--ink-2)', textDecoration: 'none',
      letterSpacing: -0.1
    }}>{l.label}</a>
    )}
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <a href="#waitlist" style={{
        background: 'var(--ink)', color: 'var(--bg)', border: 'none',
        padding: '10px 18px', borderRadius: 999, fontSize: 14, fontWeight: 500,
        fontFamily: 'inherit', cursor: 'pointer', letterSpacing: -0.1,
        textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--sage)' }} />
        Join the waitlist
      </a>
    </div>
  </nav>;


// ── Phone frame wrapper — scale a Screen component down ────
const PhoneInline = ({ children, scale = 0.7, tilt = 0, shadow = true }) =>
<div style={{
  width: PHONE_W * scale, height: PHONE_H * scale,
  flexShrink: 0
}}>
    <div className="pi-screen" style={{
    width: PHONE_W, height: PHONE_H,
    transform: `scale(${scale}) ${tilt ? `rotate(${tilt}deg)` : ''}`,
    transformOrigin: 'top left',
    borderRadius: 44 / scale * scale,
    overflow: 'hidden',
    boxShadow: shadow ?
    '0 1px 0 rgba(255,255,255,.4) inset, 0 0 0 8px #1a1814, 0 0 0 9px rgba(0,0,0,.15), 0 40px 80px rgba(40,30,20,.18), 0 12px 32px rgba(40,30,20,.10)' :
    'none'
  }}>
      {children}
    </div>
  </div>;


// ── Hero ───────────────────────────────────────────────────
const LandingHero = ({ source = 'landing' }) =>
<section className="corda-hero-section" style={{
  padding: '80px 48px 120px',
  background: 'radial-gradient(ellipse 80% 70% at 50% 0%, var(--sage-tint), var(--bg) 70%)',
  position: 'relative', overflow: 'hidden'
}}>
    <ConfirmedBanner />
    <div className="corda-hero-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 48, alignItems: 'center' }}>
      {/* left */}
      <div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px',
        borderRadius: 999, background: 'var(--surface)', boxShadow: 'var(--sh-1)',
        border: '0.5px solid var(--hairline-soft)', fontSize: 13, color: 'var(--ink-2)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--sage-deep)', flexShrink: 0 }} />
          {/* No live signup count or "launch at N families" countdown — early
              access is framed simply as coming soon (founder decision). */}
          <span><span style={{ color: 'var(--sage-deep)', fontWeight: 600 }}>Early access</span> — coming soon</span>
        </div>

        <h1 className="corda-hero-h1" style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 76, lineHeight: 1.0, letterSpacing: '-0.03em',
        margin: '28px 0 0', color: 'var(--ink)',
        textWrap: 'pretty'
      }}>
          Everything you're<br />carrying — held.
        </h1>

        <p style={{
        fontSize: 18, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 500,
        margin: '28px 0 0'
      }}>
          Every appointment for everyone you care for — pulled straight from your calendar,
          color-coded by who it's for, with a visit note you can actually find later.
        </p>

        <div style={{ marginTop: 36 }}>
          {LAUNCH_LIVE
            ? <AppStoreButton placement="hero" />
            : <WaitlistForm size="hero" source={source} />}
        </div>

        <div style={{ marginTop: 24, fontSize: 13, color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 16 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="lock" size={13} color="var(--sage-deep)" /> HIPAA-aligned
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="calendar" size={13} color="var(--sage-deep)" /> Works with Google Calendar
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="heart" size={13} color="var(--sage-deep)" /> Free to join
          </span>
        </div>
      </div>

      {/* right — phone duo */}
      <div className="corda-hero-phones" style={{ position: 'relative', height: 720, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', left: -10, top: 20, zIndex: 1, transform: 'rotate(-4deg)' }}>
          <PhoneInline scale={0.66}><ScreenCalMonth /></PhoneInline>
        </div>
        <div style={{ position: 'absolute', right: -10, top: 60, zIndex: 2, transform: 'rotate(3deg)' }}>
          <PhoneInline scale={0.72}><ScreenCalToday /></PhoneInline>
        </div>
        {/* leaf accent */}
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" style={{ position: 'absolute', top: -8, right: 40, opacity: 0.22 }}>
          <path d="M5 19c2-10 9-15 15-15-1 9-6 15-15 15z" stroke="var(--sage-deep)" strokeWidth="1" strokeLinejoin="round" />
        </svg>
      </div>
    </div>
  </section>;


// ── Marquee / trust strip ─────────────────────────────────
const TrustStrip = () =>
<section style={{ padding: '40px 48px', borderTop: '0.5px solid var(--hairline-soft)', borderBottom: '0.5px solid var(--hairline-soft)' }}>
    <div className="corda-trust-inner" style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
      <div style={{ fontSize: 13, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 1.2, fontWeight: 500 }}>
        For families caring for
      </div>
      <div className="corda-trust-items" style={{ display: 'flex', gap: 0, rowGap: 8, flexWrap: 'wrap', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--ink-2)', letterSpacing: '-0.01em' }}>
        <span style={{ whiteSpace: 'nowrap', marginRight: 36 }}>a parent with dementia <span style={{ color: 'var(--ink-4)' }}>·</span></span>
        <span style={{ whiteSpace: 'nowrap', marginRight: 36 }}>an aging partner <span style={{ color: 'var(--ink-4)' }}>·</span></span>
        <span style={{ whiteSpace: 'nowrap', marginRight: 36 }}>a sibling with chronic illness <span style={{ color: 'var(--ink-4)' }}>·</span></span>
        <span style={{ whiteSpace: 'nowrap' }}>a recovering grandparent</span>
      </div>
    </div>
  </section>;


// ── Section wrapper ───────────────────────────────────────
const FeatureSection = ({ eyebrow, title, body, points, screen, reverse, bg }) =>
<section className="corda-feature-section" style={{ padding: '120px 48px', background: bg || 'transparent' }}>
    <div className="corda-feature-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid',
    gridTemplateColumns: reverse ? '1fr 1.1fr' : '1.1fr 1fr', gap: 96, alignItems: 'center' }}>
      {/* text */}
      <div className="corda-feature-text" style={{ order: reverse ? 2 : 1 }}>
        <div style={{ fontSize: 12, color: 'var(--sage-deep)', fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase' }}>{eyebrow}</div>
        <h2 className="corda-feature-h2" style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.025em',
        margin: '16px 0 24px', color: 'var(--ink)', textWrap: 'balance'
      }}>{title}</h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0, maxWidth: 480 }}>{body}</p>
        {points &&
      <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 480 }}>
            {points.map((p) =>
        <div key={p.title} style={{ display: 'flex', gap: 14 }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--sage-tint)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={p.icon} size={16} color="var(--sage-deep)" />
                </div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{p.title}</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 2 }}>{p.body}</div>
                </div>
              </div>
        )}
          </div>
      }
      </div>
      {/* phone */}
      <div className="corda-feature-phone" style={{ order: reverse ? 1 : 2, display: 'flex', justifyContent: 'center' }}>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', inset: -40, background: 'radial-gradient(ellipse, var(--sage-tint) 0%, transparent 70%)', opacity: 0.7, zIndex: -1, borderRadius: '50%' }} />
          <PhoneInline scale={0.78}>{screen}</PhoneInline>
        </div>
      </div>
    </div>
  </section>;


// ── How-it-works strip ───────────────────────────────────
const HowItWorks = () =>
<section id="how" className="corda-how-section" style={{ padding: '120px 48px', background: 'var(--surface-2)' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <div style={{ fontSize: 12, color: 'var(--sage-deep)', fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase' }}>How Corda works</div>
        <h2 className="corda-how-h2" style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.025em',
        margin: '14px auto 0', color: 'var(--ink)', maxWidth: 720, textWrap: 'balance'
      }}>
          Four steps from a full calendar to a clear head.
        </h2>
      </div>

      <div className="corda-how-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {[
      { num: '01', icon: 'calendar', title: 'Connect your calendar',
        body: 'Corda reads your Google Calendar — read-only. Every appointment shows up automatically, with nothing to re-enter.' },
      { num: '02', icon: 'tag', title: 'Assign each event',
        body: "New appointments land in an inbox. Tag who it's for and which provider — once — and it's sorted for good." },
      { num: '03', icon: 'note', title: 'Write the visit note',
        body: 'During or after the appointment, capture what mattered. Each note files itself under the right provider.' },
      { num: '04', icon: 'checkCheck', title: 'Track the follow-ups',
        body: 'Callbacks, paperwork, questions for next time — quick tasks so nothing slips between visits.' }].
      map((s, i) =>
      <div key={s.num} style={{ position: 'relative' }}>
            <Card pad={28} radius="var(--r-lg)" style={{ height: '100%' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--sage-tint)',
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={s.icon} size={20} color="var(--sage-deep)" />
                </div>
                <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 28, color: 'var(--ink-4)', letterSpacing: '-0.02em' }}>{s.num}</div>
              </div>
              <div style={{ fontSize: 20, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.015em', marginBottom: 12 }}>{s.title}</div>
              <div style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.55 }}>{s.body}</div>
            </Card>
          </div>
      )}
      </div>
    </div>
  </section>;


// ── Privacy section ──────────────────────────────────────
const PrivacySection = () =>
<section className="corda-privacy-section" style={{ padding: '120px 48px' }}>
    <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
      <div style={{
      width: 64, height: 64, borderRadius: 18, background: 'var(--sage-deep)',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28
    }}>
        <Icon name="shield" size={28} color="var(--bg)" />
      </div>
      <h2 className="corda-privacy-h2" style={{
      fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
      fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em',
      margin: '0 0 24px', color: 'var(--ink)', textWrap: 'balance'
    }}>
        Your family's health is sacred.
      </h2>
      <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 720, margin: '0 auto' }}>
        Corda runs on HIPAA-aligned infrastructure with end-to-end encryption. It connects to your calendar
        read-only and never changes a thing. You decide what's shared, with whom — and you can delete anything,
        forever, anytime.
      </p>

      <div className="corda-privacy-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 56 }}>
        {[
      { icon: 'lock', title: 'Encrypted at rest & in transit', body: 'AES-256, TLS 1.3' },
      { icon: 'calendar', title: 'Read-only calendar access', body: 'We never edit your events' },
      { icon: 'eye', title: 'No data sold, ever', body: 'Not to insurers, not to anyone' },
      { icon: 'check', title: 'You can delete everything', body: 'One tap. No appeals.' }].
      map((c) =>
      <Card key={c.title} pad={22} style={{ textAlign: 'left' }}>
            <Icon name={c.icon} size={20} color="var(--sage-deep)" />
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 12, lineHeight: 1.35 }}>{c.title}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>{c.body}</div>
          </Card>
      )}
      </div>
    </div>
  </section>;


// ── Testimonial ──────────────────────────────────────────
const Testimonial = () =>
<section id="families" style={{ padding: '120px 48px', background: 'var(--sage-tint)' }}>
    <div style={{ maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 32, color: 'var(--sage-deep)', lineHeight: 1, marginBottom: 28 }}>"</div>
      <blockquote className="corda-quote" style={{
      fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
      fontSize: 40, lineHeight: 1.25, letterSpacing: '-0.02em',
      color: 'var(--ink)', margin: 0, textWrap: 'pretty'
    }}>
        Nana and Papa's appointments used to live in my head and google calendars and notes app and stack of sticky
        notes. Now every visit is in Corda, every note is organized by provider. I finally feel like I have my mind back.
      </blockquote>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, marginTop: 36 }}>
        <Avatar name="Jazmyn H" size={44} tone="plum" />
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontSize: 15, fontWeight: 600 }}>Jazmyn H</div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-3)' }}>Granddaughter · caring for both her grandparents</div>
        </div>
      </div>
    </div>
  </section>;


// ── Pricing ──────────────────────────────────────────────
const Pricing = () =>
<section id="pricing" className="corda-pricing-section" style={{ padding: '120px 48px' }}>
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <div style={{ fontSize: 12, color: 'var(--sage-deep)', fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase' }}>Pricing</div>
        <h2 style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.025em',
        margin: '14px auto 12px', color: 'var(--ink)'
      }}>
          Free while we're getting started.
        </h2>
        <p style={{ fontSize: 16, color: 'var(--ink-2)', margin: 0 }}>
          Everything Corda does today, free for every family on the waitlist. No credit card, ever.
        </p>
      </div>

      <Card pad={0} radius="var(--r-xl)" style={{ maxWidth: 560, margin: '0 auto', background: 'var(--ink)', color: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -60, right: -60, width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle, var(--sage-deep), transparent 62%)', opacity: 0.4 }} />
        <div style={{ padding: 40, position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ fontSize: 15, fontWeight: 600, opacity: 0.85 }}>Corda</div>
            <Pill tone="ink" size="sm" style={{ background: 'var(--sage-deep)', color: 'var(--bg)', whiteSpace: 'nowrap' }}>Free to join</Pill>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 18 }}>
            <span style={{ fontSize: 68, fontFamily: 'var(--font-serif)', fontStyle: 'italic', letterSpacing: '-0.02em', lineHeight: 1, marginRight: 6 }}>Free</span>
            <span style={{ fontSize: 16, opacity: 0.7 }}>no card required</span>
          </div>
          <div style={{ fontSize: 14.5, opacity: 0.78, marginTop: 12, lineHeight: 1.5 }}>
            Care for everyone you love and share the record with family — at no cost.
          </div>

          <div style={{ height: 1, background: 'rgba(255,255,255,.15)', margin: '28px 0' }} />

          <ul className="corda-pricing-features" style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {[
              'Care for everyone, switch in a tap',
              'Google Calendar sync, read-only',
              'Assign events by person & provider',
              'Visit notes, organized by provider',
              'Filter notes by provider or person',
              'Care team & follow-up tasks',
            ].map((f) => (
              <li key={f} style={{ display: 'flex', gap: 9, alignItems: 'flex-start', fontSize: 14, opacity: 0.92 }}>
                <Icon name="check" size={16} color="var(--sage)" /> {f}
              </li>
            ))}
          </ul>

          <a href="#waitlist" style={{ display: 'block', width: '100%', marginTop: 32, padding: '15px', borderRadius: 14, background: 'var(--bg)', border: 'none', color: 'var(--ink)', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', textAlign: 'center', textDecoration: 'none', boxSizing: 'border-box' }}>
            Join the waitlist
          </a>
        </div>
      </Card>
    </div>
  </section>;


// ── Closing CTA ──────────────────────────────────────────
const ClosingCTA = ({ source = 'landing' }) =>
<section id="waitlist" className="corda-cta-section" style={{ padding: '140px 48px 120px', textAlign: 'center', background: 'radial-gradient(ellipse 70% 70% at 50% 100%, var(--sage-tint), var(--bg) 70%)' }}>
    <div style={{ maxWidth: 820, margin: '0 auto' }}>
      <Logomark size={48} />
      <h2 className="corda-cta-h2" style={{
      fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
      fontSize: 72, lineHeight: 1.0, letterSpacing: '-0.03em',
      margin: '32px 0 24px', color: 'var(--ink)', textWrap: 'balance'
    }}>
        Caring shouldn't<br />feel like surviving.
      </h2>
      {/* DRAFT (founding-cap removed per founder decision) — open early-access copy,
          no "until 50 families" ceiling; founding-member perks kept as a tier.
          Pending founder copy approval. */}
      <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 580, margin: '0 auto' }}>
        We're building Corda with our first families. Join now for early access — and founding-member perks while they last.
      </p>

      {/* Founding perks */}
      <div className="corda-cta-perks" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, margin: '44px 0 36px', textAlign: 'left' }}>
        {[
        { icon: 'sparkle', title: 'Early access', body: 'Be among the first families to use Corda when it lands.' },
        { icon: 'check',   title: 'Founding pricing', body: 'Lock in your rate — forever.' },
        { icon: 'note',    title: 'Shape the product', body: 'Direct feedback line to the founders.' }
      ].map((p) =>
        <Card key={p.title} pad={20} style={{ textAlign: 'left' }}>
            <Icon name={p.icon} size={18} color="var(--sage-deep)" />
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 10, color: 'var(--ink)' }}>{p.title}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.45 }}>{p.body}</div>
          </Card>
      )}
      </div>

      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <WaitlistForm size="hero" source={source} />
      </div>
      <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 20 }}>
        Free to join. No credit card. Ever.
      </div>
    </div>
  </section>;


const AppStoreGlyph = () =>
<svg width="20" height="22" viewBox="0 0 20 22" fill="none">
    <path d="M14.5 11.8c0-2.4 2-3.6 2.1-3.6-1.1-1.6-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.6.9-.8 0-2-.9-3.2-.8-1.6 0-3.2 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.8 1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.4-2.8-.1 0-2.7-1-2.7-4zM12.3 4.4c.7-.8 1.1-2 1-3.2-1 0-2.3.7-2.9 1.5-.6.7-1.2 1.9-1 3 1.1.1 2.2-.6 2.9-1.3z" fill="currentColor" />
  </svg>;

// ── Post-launch download CTA ──────────────────────────────
// Dormant until LAUNCH_LIVE flips on. Fires `landing_download_clicked` so the
// download funnel (web click → App Store page view → install) is measurable
// the moment the listing goes live. `placement` distinguishes hero vs closing.
const AppStoreButton = ({ placement = 'hero' }) =>
<a
  href={APP_STORE_URL}
  onClick={() => window.cordaTrack && window.cordaTrack('landing_download_clicked', { placement })}
  style={{
    display: 'inline-flex', alignItems: 'center', gap: 10,
    background: 'var(--ink)', color: 'var(--bg)', textDecoration: 'none',
    padding: '13px 22px', borderRadius: 14, fontSize: 15, fontWeight: 600,
    letterSpacing: -0.1
  }}>
    <AppStoreGlyph />
    <span style={{ display: 'inline-flex', flexDirection: 'column', lineHeight: 1.1 }}>
      <span style={{ fontSize: 11, fontWeight: 500, opacity: 0.85 }}>Download on the</span>
      <span style={{ fontSize: 17, fontWeight: 600 }}>App Store</span>
    </span>
  </a>;


// ── Footer ───────────────────────────────────────────────
const LandingFooter = () =>
<footer style={{ padding: '40px 48px', borderTop: '0.5px solid var(--hairline-soft)' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 48, flexWrap: 'wrap' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, flex: '1 1 480px', minWidth: 0 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
          <Logomark size={26} />
          <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 19, letterSpacing: '-0.04em' }}>corda</span>
        </div>
        <p style={{ fontSize: 13.5, color: 'var(--ink-3)', lineHeight: 1.55, margin: 0, maxWidth: 460 }}>
          Appointments, providers, visit notes. Made for the families doing the most important work in the world.
        </p>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 13, color: 'var(--ink-3)', flexShrink: 0, flexWrap: 'wrap' }}>
        <a href="/privacy" style={{ color: 'var(--ink-3)', textDecoration: 'none' }}>Privacy</a>
        <span style={{ width: 1, height: 14, background: 'var(--hairline)' }} />
        <a href="/terms" style={{ color: 'var(--ink-3)', textDecoration: 'none' }}>Terms</a>
        <span style={{ width: 1, height: 14, background: 'var(--hairline)' }} />
        <a href="/security" style={{ color: 'var(--ink-3)', textDecoration: 'none' }}>Security</a>
        <span style={{ width: 1, height: 14, background: 'var(--hairline)' }} />
        <span>© 2026 Corda, Inc.</span>
      </div>
    </div>
  </footer>;


Object.assign(window, {
  LandingNav, LandingHero, TrustStrip, FeatureSection, HowItWorks,
  PrivacySection, Testimonial, Pricing, ClosingCTA, LandingFooter,
  PhoneInline, WaitlistForm, EarlyAccessNote, ConfirmedBanner,
  AppStoreButton
});