// Features — "Everything In One Place" — power features w/ live UI fragments + revenue chart

function Features() {
  return (
    <Section pad={120} id="features" label="05 Features">
      <SectionHeader
        eyebrow="How it actually works"
        headline="The agent works,"
        accent="you approve."
        subhead="Every action is drafted, traceable, and reversible. You stay the operator. The agent is the staff."
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
        <BentoCard variant="dark" style={{ padding: 32, minHeight: 460 }}>
          <Pill tone="cyan">Live thread</Pill>
          <h3 style={{ fontSize: 26, fontWeight: 600, margin: '14px 0 10px', letterSpacing: '-0.02em' }}>
            Reads context across every channel.
          </h3>
          <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.55)', maxWidth: 440, margin: '0 0 24px' }}>
            Gmail, WhatsApp, Slack, Telegram, Calendar, and Drive. The agent threads everything together so nothing falls between systems.
          </p>
          <ContextWeb />
        </BentoCard>

        <BentoCard variant="dark" style={{ padding: 32, minHeight: 460 }}>
          <Pill tone="cyan">Revenue ↗</Pill>
          <h3 style={{ fontSize: 26, fontWeight: 600, margin: '14px 0 10px', letterSpacing: '-0.02em' }}>
            Track your revenue.
          </h3>
          <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.55)', maxWidth: 440, margin: '0 0 24px' }}>
            Follow artist growth by region, spot which markets are moving, and get smart AI analysis on the signals behind every revenue shift.
          </p>
          <RevenueChart />
        </BentoCard>
      </div>

      <BentoCard variant="dark" style={{ padding: 32 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, alignItems: 'center' }}>
          <div>
            <Pill tone="cyan">Audit log</Pill>
            <h3 style={{ fontSize: 28, fontWeight: 600, margin: '14px 0 10px', letterSpacing: '-0.02em' }}>
              Every action, traceable.
            </h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.6)', maxWidth: 420, margin: 0 }}>
              No black box. Every reply the agent drafts and every action it takes is logged with the source it cited. Approve, edit, or roll back from one place.
            </p>
            <div style={{ display: 'flex', gap: 24, marginTop: 28 }}>
              <Stat big="100%" small="Citations" />
              <Stat big="<2s" small="Rollback" />
              <Stat big="0" small="Data training" />
              <Stat big="EU" small="AI servers" />
            </div>
          </div>
          <AuditFeed />
        </div>
      </BentoCard>
    </Section>
  );
}

function ContextWeb() {
  // A central agent node with connected product logos.
  const nodes = [
    { label: 'Gmail', x: 13, y: 18, logo: 'gmail.svg' },
    { label: 'WhatsApp', x: 82, y: 20, logo: 'whatsapp.svg' },
    { label: 'Slack', x: 12, y: 76, logo: 'slack.svg' },
    { label: 'Telegram', x: 84, y: 76, logo: 'telegram.svg' },
    { label: 'Calendar', x: 50, y: 8, logo: 'google-calendar.svg' },
    { label: 'Drive', x: 50, y: 91, logo: 'google-drive.svg' },
  ];
  return (
    <div style={{ position: 'relative', height: 240, marginTop: 8 }}>
      {/* Lines */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} viewBox="0 0 100 100" preserveAspectRatio="none">
        {nodes.map((n, i) => (
          <line key={i} x1="50" y1="50" x2={n.x} y2={n.y} stroke="var(--accent-line)" strokeWidth="0.3" strokeDasharray="1 1" />
        ))}
      </svg>
      {/* Center agent */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        width: 64, height: 64, borderRadius: 999,
        background: '#050505',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 0 0 4px #050505, 0 0 40px var(--accent-soft)',
        zIndex: 2,
      }}>
        <BrandMark size={64} alt="rellay" />
      </div>
      {/* Channel nodes */}
      {nodes.map((n, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${n.x}%`, top: `${n.y}%`, transform: 'translate(-50%, -50%)',
          padding: '7px 12px 7px 8px', borderRadius: 999,
          background: 'rgba(5,5,5,0.84)',
          border: '1px solid rgba(255,255,255,0.12)',
          fontSize: 11, fontWeight: 500, color: '#fff',
          display: 'flex', alignItems: 'center', gap: 6,
          backdropFilter: 'blur(8px)',
          boxShadow: '0 12px 30px rgba(0,0,0,0.28)',
        }}>
          <span style={{
            width: 22, height: 22, borderRadius: 999,
            background: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <img src={`assets/live-thread/${n.logo}`} alt="" style={{ width: 16, height: 16, display: 'block' }} />
          </span>
          {n.label}
        </div>
      ))}
    </div>
  );
}

function RevenueChart() {
  // Animated SVG line chart
  const data = [22, 28, 24, 36, 42, 48, 56, 62, 71, 78, 88, 98];
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const W = 480, H = 200;
  const max = 100;
  const pts = data.map((v, i) => [i / (data.length - 1) * W, H - (v / max) * H]);
  const path = pts.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(' ');
  const fill = `${path} L ${W} ${H} L 0 ${H} Z`;

  return (
    <div style={{ position: 'relative' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 16,
      }}>
        <div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginBottom: 4 }}>Revenue and regional growth</div>
          <div style={{ fontSize: 28, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
            $1.24M <span style={{ fontSize: 12, color: '#4ade80', marginLeft: 6 }}>+38%</span>
          </div>
        </div>
        <div style={{
          padding: '4px 10px', borderRadius: 999,
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.08)',
          fontSize: 11, color: 'rgba(255,255,255,0.6)',
          fontFamily: 'JetBrains Mono, monospace',
        }}>
          12mo
        </div>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 200, display: 'block' }}>
        <defs>
          <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.35" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        {/* Grid */}
        {[0.25, 0.5, 0.75].map(y => (
          <line key={y} x1="0" x2={W} y1={H * y} y2={H * y} stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
        ))}
        <path d={fill} fill="url(#chartFill)" />
        <path d={path} fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
        {/* End dot */}
        <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="5" fill="var(--accent)" />
        <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="10" fill="var(--accent)" opacity="0.2" />
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'JetBrains Mono, monospace' }}>
        {months.filter((_, i) => i % 2 === 0).map(m => <span key={m}>{m}</span>)}
      </div>
    </div>
  );
}

function AuditFeed() {
  const entries = [
    { time: '14:32', actor: 'agent', action: 'Replied to Pitchfork — Maya feature', source: 'gmail · scheduled Tue 2pm', tone: 'sent' },
    { time: '14:28', actor: 'you', action: 'Approved draft', source: 'inbox', tone: 'approved' },
    { time: '14:14', actor: 'agent', action: 'Drafted contract redline — A24 sync', source: 'docusign · cited 3 prior deals', tone: 'queued' },
    { time: '13:47', actor: 'agent', action: 'Held studio Tue–Thu for Lior', source: 'calendar · no conflicts', tone: 'sent' },
    { time: '13:31', actor: 'agent', action: 'Flagged: Sable EP delivery slipping', source: 'project tracker · 4 days late', tone: 'flag' },
    { time: '12:58', actor: 'you', action: 'Rolled back agent reply to label', source: 'audit · v.2 → v.1', tone: 'rollback' },
  ];
  const toneColors = {
    sent: '#4ade80', approved: 'var(--accent)', queued: '#fbbf24', flag: '#ef4444', rollback: 'rgba(255,255,255,0.5)',
  };
  return (
    <div style={{
      borderRadius: 14,
      background: '#050505',
      border: '1px solid rgba(255,255,255,0.06)',
      overflow: 'hidden',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '10px 16px', borderBottom: '1px solid rgba(255,255,255,0.06)',
        fontSize: 11, color: 'rgba(255,255,255,0.5)', fontFamily: 'JetBrains Mono, monospace',
      }}>
        <span>audit.log</span>
        <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#4ade80' }} />
          live
        </span>
      </div>
      {entries.map((e, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '60px 60px 1fr',
          padding: '10px 16px',
          borderBottom: i < entries.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none',
          alignItems: 'center', gap: 12,
        }}>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', fontFamily: 'JetBrains Mono, monospace' }}>{e.time}</div>
          <div style={{
            fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
            color: e.actor === 'agent' ? 'var(--accent)' : 'rgba(255,255,255,0.7)',
          }}>{e.actor}</div>
          <div>
            <div style={{ fontSize: 13, color: '#fff', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: toneColors[e.tone] }} />
              {e.action}
            </div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginTop: 2, paddingLeft: 14 }}>{e.source}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Features });