// Features grid — six core features in a bento-style asymmetric grid.

const FeatureCard = ({ icon, title, body, children, span = 1, accent }) => (
  <div className="reveal" style={{
    gridColumn: `span ${span}`,
    padding: 32,
    borderRadius: 'var(--radius-lg)',
    background: accent ? 'var(--fg)' : 'var(--card-solid)',
    color: accent ? 'var(--bg)' : 'var(--fg)',
    border: '1px solid ' + (accent ? 'var(--fg)' : 'var(--line)'),
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    minHeight: 260,
    overflow: 'hidden',
    position: 'relative',
  }}>
    <div style={{
      width: 38, height: 38, borderRadius: 10,
      background: accent ? 'var(--gold)' : 'var(--bg-soft)',
      color: accent ? '#1A1A1A' : 'var(--fg)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      <Icon name={icon} size={18} />
    </div>
    <div>
      <h3 style={{ fontSize: 22, marginBottom: 10, color: 'inherit' }}>{title}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: accent ? 'rgba(245,241,232,0.7)' : 'var(--fg-mute)' }}>{body}</p>
    </div>
    {children}
  </div>
);

const Features = () => {
  return (
    <section id="features" style={{ background: 'var(--bg-soft)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 40, flexWrap: 'wrap' }}>
          <div className="reveal" style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>What's inside</div>
            <h2>Everything a specialist needs. Nothing they don't.</h2>
          </div>
          <p className="lede reveal" style={{ maxWidth: 420 }}>
            Built around the realities of running a 1–5 provider practice. No new
            login for your team. No PMS integration. No IT department.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
          gap: 20,
        }}>
          {/* AI generation — large featured */}
          <FeatureCard
            icon="sparkle"
            title="AI that knows specialist procedures"
            body="Hinata's models are trained on the specific language and clinical context of oral surgery, endodontics, periodontics, and prosthodontics. Not a generic chatbot. Not a template library."
            span={4}
            accent
          >
            <div style={{ marginTop: 'auto', padding: '14px 16px', background: 'rgba(245,241,232,0.06)', borderRadius: 10, border: '1px solid rgba(245,241,232,0.1)' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--gold-soft)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>
                Generation prompt
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.55, fontFamily: 'Geist Mono', color: 'rgba(245,241,232,0.9)' }}>
                <span style={{ color: 'var(--gold-soft)' }}>implant</span> + <span style={{ color: 'var(--gold-soft)' }}>bone graft</span> · tooth #14 · context: <span style={{ color: 'var(--gold-soft)' }}>"smoker, anxious"</span>
              </div>
              <div style={{ marginTop: 10, fontSize: 13, lineHeight: 1.55, color: 'rgba(245,241,232,0.7)' }}>
                → Adjusts healing timeline, adds smoking-specific recovery notes, softens
                tone in introductory copy, surfaces sedation FAQ.
              </div>
            </div>
          </FeatureCard>

          {/* Branded */}
          <FeatureCard
            icon="palette"
            title="Fully white-labeled"
            body="Your logo, colors, photo, contact info. Patients never see Hinata's name."
            span={2}
          >
            <div style={{ marginTop: 'auto', display: 'flex', gap: 6 }}>
              {['#1A1A1A', '#B8924A', '#E6CC8A', '#FBF6EC'].map((c) => (
                <div key={c} style={{ width: 28, height: 28, borderRadius: 6, background: c, border: '1px solid var(--line)' }}></div>
              ))}
              <div style={{ width: 28, height: 28, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-faint)' }}>
                <Icon name="plus" size={12} />
              </div>
            </div>
          </FeatureCard>

          {/* Mobile share */}
          <FeatureCard
            icon="share"
            title="Share where patients live"
            body="One link. WhatsApp, SMS, email, or printed QR. 57% of plans get opened on phone first."
            span={2}
          >
            <div style={{ marginTop: 'auto', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {[
                { icon: 'whatsapp', label: 'WhatsApp' },
                { icon: 'sms', label: 'SMS' },
                { icon: 'mail', label: 'Email' },
              ].map((c) => (
                <div key={c.label} className="chip">
                  <Icon name={c.icon} size={12} /> {c.label}
                </div>
              ))}
            </div>
          </FeatureCard>

          {/* 3D library */}
          <FeatureCard
            icon="play"
            title="Procedure animations, auto-picked"
            body="A library of 3D procedure animations matched to your case automatically. Cases are explained, not just listed."
            span={2}
          >
            <div style={{ marginTop: 'auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
              {[1,2,3].map((i) => (
                <div key={i} style={{
                  height: 56,
                  borderRadius: 8,
                  background: `radial-gradient(circle at 30% 30%, #F2E7D0, #E6D2A8)`,
                  position: 'relative',
                  overflow: 'hidden',
                }}>
                  <div style={{
                    position: 'absolute', bottom: 4, left: 4,
                    fontSize: 9, fontFamily: 'Geist Mono',
                    color: 'rgba(0,0,0,0.6)',
                  }}>0:{40 + i*5}</div>
                </div>
              ))}
            </div>
          </FeatureCard>

          {/* Analytics */}
          <FeatureCard
            icon="chart"
            title="Patient-side analytics"
            body="Open rates, time-on-section, FAQ taps. Spot anxieties before the consult."
            span={2}
          >
            <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', gap: 4, height: 48 }}>
              {[24, 36, 30, 48, 42, 56, 50, 64].map((h, i) => (
                <div key={i} style={{
                  flex: 1,
                  height: h,
                  borderRadius: 2,
                  background: i === 7 ? 'var(--gold)' : 'var(--bg-deep)',
                }}></div>
              ))}
            </div>
          </FeatureCard>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Features });