// pricing.jsx — Pricing + App Store CTA
// Two tiers (Plus monthly / Plus yearly).

function Pricing({ motion = true }) {
  return (
    <section id="pricing" className="section" style={{ position: 'relative' }}>
      <div className="container">
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 16,
          marginBottom: 'clamp(28px, 4vh, 48px)',
        }}>
          <span className="eyebrow">§ 06 · Pricing</span>
          <span style={{ flex: 1, height: 1, background: 'var(--rule)' }} />
          <span className="lab">7-day free trial</span>
        </div>

        <div className="pricing-head" style={{
          display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 32, alignItems: 'end',
        }}>
          <h2 className="display-2 text-balance" style={{ margin: 0 }}>
            Independent.{' '}
            <span className="serif-italic" style={{ color: 'var(--moss-deep)' }}>Subscription-funded.</span>
            {' '}No brand deals, ever.
          </h2>
          <p className="body-l text-pretty" style={{ margin: 0 }}>
            One revenue source keeps us honest: you.
            Free tier covers the daily check-in and the first 200 ingredients.
            Plus opens the full library, unlimited journal history, and the Notes archive.
          </p>
        </div>
      </div>

      <div className="container" style={{ marginTop: 'clamp(60px, 8vh, 100px)' }}>
        <div className="pricing-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
          gap: 20,
        }}>
          <PlanCard
            tier="Free"
            price="£0"
            cadence="forever"
            tag="The bones"
            features={[
              'Daily 10-second check-in',
              'Routine builder (AM/PM)',
              'Library: first 200 ingredients',
              '30-day journal history',
              'Latest weekly Note',
            ]}
            tone="paper"
            motion={motion}
          />
          <PlanCard
            tier="Plus monthly"
            price="£4.99"
            cadence="per month"
            tag="Try it on"
            features={[
              'Everything in Free',
              "Your skin's patterns, trends & charts",
              'Full ingredient library',
              'Barcode scanner & product database',
              'Unlimited journal history',
              'Notes archive (all back issues)',
              'Photos-only filter in the Journal',
            ]}
            tone="petal"
            motion={motion}
          />
          <PlanCard
            tier="Plus yearly"
            price="£39.99"
            cadence="per year"
            originalPrice="£59.88"
            saving="Save 33%"
            tag="7-day trial"
            features={[
              'Everything in Plus monthly',
              '7-day free trial',
            ]}
            tone="moss"
            featured
            motion={motion}
          />
        </div>

        {/* Launch CTA */}
        <div className="glass" style={{
          marginTop: 56,
          padding: 'clamp(32px, 5vw, 56px)',
          borderRadius: 32,
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* decoration */}
          <div style={{ position: 'absolute', top: -40, right: -30, opacity: 0.7, pointerEvents: 'none' }}>
            <PetriOrnament size={220} hue="sage" />
          </div>
          <div style={{ position: 'absolute', bottom: -60, left: -40, opacity: 0.5, pointerEvents: 'none' }}>
            <PetriOrnament size={180} hue="petal" />
          </div>

          <div className="launch-grid" style={{
            position: 'relative',
            display: 'grid',
            gridTemplateColumns: '1.1fr 1fr',
            gap: 48, alignItems: 'center',
          }}>
            <div>
              <div className="lab" style={{ color: 'var(--moss-deep)' }}>Out now</div>
              <h3 style={{
                margin: '10px 0 0',
                fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: 'clamp(36px, 4.5vw, 56px)', lineHeight: 1.02,
                letterSpacing: '-0.02em', color: 'var(--ink)',
              }}>
                Available on the{' '}
                <span className="serif-italic" style={{ color: 'var(--moss-deep)' }}>App Store.</span>
              </h3>
              <p className="body-m text-pretty" style={{
                marginTop: 14, maxWidth: 440,
              }}>
                A calm, science-led skincare journal for iPhone.
                No brand deals, no AI on your photos, no verdicts.
              </p>
              <a href="https://apps.apple.com/app/nurtli/id0000000000" target="_blank" rel="noopener"
                 className="btn btn-primary" style={{ marginTop: 22 }}>
                Download on the App Store
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M2 7h9M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </a>
            </div>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignContent: 'center' }}>
              {['iPhone · iOS 18.4+', 'On-device by default', 'No AI on your photos', 'Single-author science', 'No brand deals'].map((t) => (
                <span key={t} className="chip" style={{ fontSize: 12 }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1080px) {
          .pricing-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 880px) {
          .pricing-head, .launch-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function PlanCard({ tier, price, originalPrice, saving, cadence, tag, features, tone, featured, motion }) {
  const toneStyles = {
    paper: { bg: '#FFFFFF', accent: '#5A9985' },
    petal: { bg: 'linear-gradient(180deg, #FBEFEA, #FFFFFF)', accent: '#E8A89C' },
    moss:  { bg: 'linear-gradient(180deg, #2C3A33, #1B2823)', accent: '#B8D4C2', dark: true },
  };
  const ts = toneStyles[tone] || toneStyles.paper;

  return (
    <div style={{
      position: 'relative',
      borderRadius: 28,
      padding: 32,
      background: ts.bg,
      border: featured ? '0.5px solid rgba(127,179,160,0.5)' : '0.5px solid rgba(127,179,160,0.2)',
      color: ts.dark ? '#F4F8F4' : 'var(--ink)',
      boxShadow: featured ? '0 30px 60px -30px rgba(61,107,87,0.4)' : '0 12px 32px -16px rgba(61,107,87,0.18)',
      overflow: 'hidden',
      transition: 'transform .4s cubic-bezier(.16,.84,.32,1)',
    }}
    onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
      {/* Top tag */}
      <div style={{
        display: 'inline-flex', padding: '5px 12px', borderRadius: 999,
        background: ts.dark ? 'rgba(184,212,194,0.18)' : 'rgba(127,179,160,0.18)',
        color: ts.accent,
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em',
        textTransform: 'uppercase',
        whiteSpace: 'nowrap',
      }}>
        {tag}
      </div>

      <div style={{ marginTop: 18 }}>
        <h3 style={{
          margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.018em',
        }}>{tier}</h3>
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontSize: 48, lineHeight: 1, color: ts.dark ? '#F4F8F4' : 'var(--ink)',
          letterSpacing: '-0.02em',
          whiteSpace: 'nowrap',
        }}>{price}</span>
        {originalPrice && (
          <span style={{
            fontSize: 16, color: ts.dark ? 'rgba(244,248,244,0.4)' : 'var(--ink-faint)',
            textDecoration: 'line-through',
          }}>{originalPrice}</span>
        )}
        <span style={{ marginLeft: 'auto', fontSize: 12, color: ts.dark ? 'rgba(244,248,244,0.55)' : 'var(--ink-muted)', whiteSpace: 'nowrap' }}>
          {cadence}
        </span>
      </div>
      {saving && (
        <div style={{
          marginTop: 4,
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
          color: ts.accent,
        }}>
          {saving}
        </div>
      )}

      <div style={{
        height: 1,
        background: ts.dark ? 'rgba(244,248,244,0.15)' : 'rgba(127,179,160,0.2)',
        margin: '22px 0',
      }} />

      <ul style={{
        listStyle: 'none', padding: 0, margin: 0,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {features.map((f) => (
          <li key={f} style={{
            display: 'flex', gap: 10, alignItems: 'flex-start',
            fontSize: 14, lineHeight: 1.45,
            color: ts.dark ? 'rgba(244,248,244,0.85)' : 'var(--ink-soft)',
          }}>
            <span style={{
              flexShrink: 0, marginTop: 6, width: 5, height: 5, borderRadius: '50%',
              background: ts.accent,
            }} />
            {f}
          </li>
        ))}
      </ul>

      <a href="https://apps.apple.com/app/nurtli/id0000000000" target="_blank" rel="noopener" className="btn" style={{
        marginTop: 26,
        width: '100%', justifyContent: 'center',
        background: featured ? '#F4F8F4' : (ts.dark ? '#F4F8F4' : 'var(--ink)'),
        color: featured ? 'var(--ink)' : (ts.dark ? 'var(--ink)' : '#F4F8F4'),
        textDecoration: 'none',
        whiteSpace: 'nowrap',
      }}>
        Download on the App Store
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M2 7h9M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>
  );
}

Object.assign(window, { Pricing });