// signal.jsx — spotlight on the Signal Engine (Nurtli's own pattern-finding brain).
// Consumer-first: what it does for you, never how it works. Implies on-device by saying so.

function Signal({ motion = true }) {
  const points = [
    {
      n: '01',
      title: 'Connections you’d miss by eye',
      body: "It reads weeks of small, messy notes at once — the overlap between how your skin felt and what was going on — and finds the threads no one catches scrolling back through a diary.",
    },
    {
      n: '02',
      title: 'It would rather say nothing than guess',
      body: "A pattern only surfaces when there’s genuinely enough behind it, and it tells you how sure it is. No false alarms, no good-or-bad verdicts, and never a diagnosis.",
    },
    {
      n: '03',
      title: 'Yours, on your iPhone',
      body: "All of it happens on your device. Your skin’s story is read by you and for you, and it stays that way.",
    },
  ];

  return (
    <section id="signal" className="section" style={{ position: 'relative' }}>
      <div className="container">
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 16,
          marginBottom: 'clamp(28px, 4vh, 48px)',
        }}>
          <span className="eyebrow">§ 05 · The Signal Engine</span>
          <span style={{ flex: 1, height: 1, background: 'var(--rule)' }} />
          <span className="lab">made in-house · runs on your iPhone</span>
        </div>

        <div className="signal-head" style={{
          display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 32, alignItems: 'end',
        }}>
          <h2 className="display-3 text-balance" style={{ margin: 0 }}>
            Most apps just store your check-ins.{' '}
            <span className="serif-italic" style={{ color: 'var(--moss-deep)' }}>Nurtli reads them.</span>
          </h2>
          <p className="body-l text-pretty" style={{ margin: 0 }}>
            The Signal Engine is the quiet brain behind Nurtli — and the part we built
            ourselves. Log how your skin feels for a few weeks and it starts to notice what
            tends to travel with your better and worse days: a product, an ingredient,
            even a run of poor sleep.
          </p>
        </div>
      </div>

      <div className="container" style={{ marginTop: 'clamp(56px, 8vh, 96px)' }}>
        <div className="signal-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 'clamp(40px, 5vw, 80px)', alignItems: 'center',
        }}>
          {/* LEFT — the three points */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {points.map((p, i) => (
              <div key={p.n} className="reveal" style={{
                padding: '22px 0',
                borderTop: i === 0 ? 'none' : '1px solid var(--rule)',
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                  <span className="lab" style={{ color: 'var(--moss-deep)' }}>{p.n}</span>
                  <h3 style={{
                    margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400,
                    fontSize: 'clamp(22px, 2.4vw, 27px)', lineHeight: 1.1, letterSpacing: '-0.015em',
                    color: 'var(--ink)',
                  }}>{p.title}</h3>
                </div>
                <p className="body-m text-pretty" style={{ margin: '10px 0 0 36px', color: 'var(--ink-soft)' }}>
                  {p.body}
                </p>
              </div>
            ))}
          </div>

          {/* RIGHT — a real example of what it surfaces */}
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <div style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
              width: 420, height: 420, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(127,179,160,0.22), transparent 62%)',
              filter: 'blur(40px)', pointerEvents: 'none',
              animation: motion ? 'breathe 7s ease-in-out infinite' : 'none',
            }} />
            <InsightSample motion={motion} />
          </div>
        </div>
      </div>

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

/* A faithful, gentle mock of what the engine actually shows you. */
function InsightSample({ motion }) {
  return (
    <div className="glass" style={{
      position: 'relative', width: '100%', maxWidth: 460,
      borderRadius: 26, padding: 'clamp(22px, 3vw, 30px)',
      display: 'flex', flexDirection: 'column', gap: 16,
    }}>
      <div className="lab" style={{ color: 'var(--moss-deep)' }}>This week · what Nurtli noticed</div>

      {/* a "worth watching" card */}
      <div style={{
        borderRadius: 18, padding: '18px 18px 16px',
        background: 'rgba(255,255,255,0.66)',
        border: '0.5px solid rgba(127,179,160,0.3)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, color: 'var(--ink)' }}>
            Possible pattern
          </span>
          <span className="chip" style={{ fontSize: 11, background: 'rgba(127,179,160,0.16)', color: 'var(--moss-deep)' }}>
            Medium confidence
          </span>
        </div>
        <p style={{ margin: '10px 0 0', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
          Off or Rough days showed up more often within a couple of days of your retinoid.
          <span style={{ color: 'var(--ink-muted)' }}> Worth watching as you log more.</span>
        </p>
        {/* tiny timeline */}
        <svg viewBox="0 0 360 44" style={{ width: '100%', height: 40, marginTop: 12 }} aria-hidden="true">
          <line x1="0" y1="22" x2="360" y2="22" stroke="rgba(61,107,87,0.15)" strokeWidth="1" strokeDasharray="2 5" />
          {[20,60,100,140,180,220,260,300,340].map((x,i) => {
            const ys = [14,16,30,32,15,18,31,17,14];
            const rough = ys[i] > 28;
            return <circle key={i} cx={x} cy={ys[i]} r="4" fill={rough ? '#E8A89C' : '#7FB3A0'} />;
          })}
          {[100,140,260].map((x,i) => (
            <path key={i} d={`M${x} 38 v4`} stroke="#E8C896" strokeWidth="2" strokeLinecap="round" />
          ))}
        </svg>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-muted)', marginTop: 2 }}>
          <span>● calmer · ● rougher</span>
          <span>▎retinoid nights</span>
        </div>
      </div>

      {/* a "calmer days" card */}
      <div style={{
        borderRadius: 18, padding: '16px 18px',
        background: 'rgba(255,255,255,0.5)',
        border: '0.5px solid rgba(127,179,160,0.22)',
      }}>
        <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, color: 'var(--ink)' }}>
          Often there on calmer days
        </div>
        <p style={{ margin: '6px 0 0', fontSize: 14, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
          Your ceramide moisturiser turned up a lot on your Great and Fine days.
        </p>
      </div>

      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--ink-muted)',
      }}>
        Observational · not medical advice
      </div>
    </div>
  );
}

Object.assign(window, { Signal });