const { Wordmark } = window.CammusDesignSystem_2ef585;

/* SEE CAMMUS IN ACTION — closing fold, dark like the rest of the deck but
   diagrammed like the one-pager: left, the five-minute promise and THE lime
   CTA (globe + app.cammusai.com + arrow) with the QR beside it; right, the
   knowledge funnel — three dark source cards with line icons, dashed flows
   merging into the Cammus Intelligence card (lime brain), then the
   pale-lime "Ready to produce" highlight (same family as the Gross Margin
   card). The footer strip carries the wordmark, the infrastructure line and
   the diligence contacts. */

const D = {
  card: 'var(--cam-surface-card)',
  cardBorder: 'var(--cam-border-subtle)',
  strong: 'var(--cam-border-strong)',
  ink: '#0A0A0A',
  white: 'var(--cam-text-primary)',
  body: 'var(--cam-text-secondary)',
  muted: 'var(--cam-text-auxiliary)',
  faint: 'var(--cam-text-inactive)',
  olive: 'var(--cam-accent-olive)',
  lime: 'var(--cam-accent-lime)',
  greenText: '#719400',
  paleLime: '#F3F7E9',
  limeBorder: 'rgba(196, 240, 0, 0.55)',
};

/* Thin geometric glyphs — line style, per the one-pager */
function ActionGlyph({ kind, size, color }) {
  const S = color || D.olive;
  const common = { fill: 'none', stroke: S, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  return (
    <svg aria-hidden="true" width={size || 28} height={size || 28} viewBox="0 0 28 28" style={{ display: 'block', flex: 'none' }}>
      {kind === 'people' && <g {...common}>
        <circle cx="10.5" cy="10" r="3.6" />
        <path d="M4 22 c0 -4.4 2.9 -7 6.5 -7 c3.6 0 6.5 2.6 6.5 7" />
        <path d="M18.5 6.8 a3.6 3.6 0 0 1 0 6.4" />
        <path d="M20 15.4 c2.6 1 4 3.3 4 6.6" />
      </g>}
      {kind === 'bookmark' && <g {...common}>
        <path d="M8 4.5 h12 v19 l-6 -4.5 l-6 4.5 z" />
      </g>}
      {kind === 'palette' && <g {...common}>
        <path d="M14 4.5 c-5.8 0 -9.5 4 -9.5 9 c0 5.2 4 9.5 9.2 9.5 c1.7 0 2.6 -1 2.6 -2.2 c0 -1.9 -1.6 -2.2 -1.6 -3.6 c0 -1.2 1 -2 2.4 -2 h2.2 c2.6 0 4.2 -1.7 4.2 -4 c0 -3.8 -4.1 -6.7 -9.5 -6.7 z" />
        <circle cx="9.5" cy="10.5" r="1" fill={S} stroke="none" />
        <circle cx="14.5" cy="8.5" r="1" fill={S} stroke="none" />
        <circle cx="19" cy="11" r="1" fill={S} stroke="none" />
      </g>}
      {kind === 'brain' && <g {...common}>
        <path d="M14 6.2 c-1 -1.5 -2.9 -2 -4.5 -1.2 c-1.5 0.8 -2.3 2.2 -2.1 3.7 c-1.7 0.6 -2.8 2.1 -2.8 3.9 c0 1.1 0.5 2.1 1.2 2.9 c-0.5 0.8 -0.7 1.8 -0.5 2.7 c0.4 1.8 1.8 3.1 3.6 3.3 c0.6 1.6 2 2.6 3.7 2.6 c0.5 0 1 -0.1 1.4 -0.3 c0.4 0.2 0.9 0.3 1.4 0.3 c1.7 0 3.1 -1 3.7 -2.6 c1.8 -0.2 3.2 -1.5 3.6 -3.3 c0.2 -0.9 0 -1.9 -0.5 -2.7 c0.7 -0.8 1.2 -1.8 1.2 -2.9 c0 -1.8 -1.1 -3.3 -2.8 -3.9 c0.2 -1.5 -0.6 -2.9 -2.1 -3.7 c-1.6 -0.8 -3.5 -0.3 -4.5 1.2 z" />
        <line x1="14" y1="6.2" x2="14" y2="23.6" />
        <path d="M10.2 11.2 c-1.2 0.4 -2 1.4 -2.2 2.6" />
        <path d="M17.8 11.2 c1.2 0.4 2 1.4 2.2 2.6" />
      </g>}
      {kind === 'bolt' && <g {...common}>
        <path d="M15.5 4 L7.5 16 h5 l-1.5 8 l8.5 -12.5 h-5 z" />
      </g>}
      {kind === 'globe' && <g {...common}>
        <circle cx="14" cy="14" r="9.5" />
        <ellipse cx="14" cy="14" rx="4.2" ry="9.5" />
        <line x1="4.5" y1="14" x2="23.5" y2="14" />
      </g>}
    </svg>
  );
}

/* Footer contact icons */
function ContactGlyph({ kind }) {
  return (
    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 18 18" style={{ display: 'block', flex: 'none' }}>
      {kind === 'whatsapp' && <g>
        <path d="M9 1.6 a7.4 7.4 0 0 0 -6.4 11.1 L1.6 16.4 l3.8 -1 A7.4 7.4 0 1 0 9 1.6 z" fill="#25D366" />
        <path d="M6.4 5.8 c-0.2 0.7 -0.2 1.6 0.5 2.7 c0.8 1.2 1.7 2.1 3 2.7 c0.9 0.35 1.6 0.2 2 -0.25" fill="none" stroke="#FFFFFF" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
      </g>}
      {kind === 'email' && <g fill="none" stroke="var(--cam-text-auxiliary)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2.2" y="4" width="13.6" height="10" rx="1.6" />
        <path d="M3 5 l6 5 l6 -5" />
      </g>}
      {kind === 'linkedin' && <g>
        <rect x="2" y="2" width="14" height="14" rx="2.4" fill="#0A66C2" />
        <text x="9" y="12.6" textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="8.2" fontWeight="800" fill="#FFFFFF">in</text>
      </g>}
    </svg>
  );
}

function KnowledgeFunnel() {
  const sources = [
    { icon: 'people', label: 'Commercial DNA', sub: ['Products, ICP, offers,', 'market, positioning.'] },
    { icon: 'bookmark', label: 'Brand DNA', sub: ['Purpose, values,', 'voice, personality.'] },
    { icon: 'palette', label: 'Brand Guidelines', sub: ['Visual identity, tone,', 'templates, rules.'] },
  ];
  const arrow = (d) => (
    <div className="lp-fade" aria-hidden="true" style={{ '--d': d, display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '4px 0' }}>
      <span style={{ width: 3, height: 22, borderRadius: 1.5, background: D.olive }} />
      <span style={{
        width: 0, height: 0, marginTop: -1, borderLeft: '6.5px solid transparent',
        borderRight: '6.5px solid transparent', borderTop: '8px solid ' + D.olive,
      }} />
    </div>
  );
  return (
    <div className="lp-group" aria-label="Commercial DNA, brand DNA and brand guidelines flow into Cammus Intelligence, ready to produce content">
      <div style={{
        color: D.faint, fontSize: 'var(--fs-eyebrow)',
        fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase',
        letterSpacing: 'var(--track-eyebrow)', textAlign: 'center',
      }}>From your company knowledge</div>

      {/* The three sources. minmax(0, 1fr) keeps the three tracks truly
          equal (plain 1fr floors at each card's min-content, and unequal
          columns throw the dashed drops off the card centers); the type
          scales down a touch at narrow widths so nowrap still fits. */}
      <div style={{
        marginTop: 'var(--space-6)', display: 'grid',
        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 'var(--space-4)',
      }}>
        {sources.map((s, i) => (
          <div key={s.label} className="lp-item" style={{
            '--d': (0.05 + i * 0.12) + 's',
            background: D.card, border: '1px solid ' + D.cardBorder,
            borderRadius: 'var(--radius-card)', padding: 'var(--space-5) var(--space-2)',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            gap: 'var(--space-3)', textAlign: 'center',
          }}>
            <ActionGlyph kind={s.icon} size={34} />
            <span className="lp-src-label" style={{
              color: D.white, fontWeight: 'var(--fw-bold)', whiteSpace: 'nowrap',
              fontSize: 'clamp(12px, 1.1vw, 14px)', letterSpacing: 'var(--track-text)', marginTop: 2,
            }}>{s.label}</span>
            <span className="lp-src-label" style={{ color: D.muted, fontSize: 'clamp(10.5px, 0.95vw, 12px)', lineHeight: 1.5, letterSpacing: 'var(--track-text)', whiteSpace: 'nowrap' }}>{s.sub[0]}<br />{s.sub[1]}</span>
          </div>
        ))}
      </div>

      {/* Dashed flows — one drop per card, merging into a single arrow.
          The side margins equal half a grid column ((100% - 2 gaps) / 6),
          so the outer drops land exactly on the outer cards' centers. */}
      <div className="lp-fade" aria-hidden="true" style={{
        '--d': '0.45s', position: 'relative',
        marginLeft: 'calc((100% - 2 * var(--space-4)) / 6)',
        marginRight: 'calc((100% - 2 * var(--space-4)) / 6)',
      }}>
        <div style={{
          height: 22,
          borderLeft: '1.5px dashed ' + D.strong,
          borderRight: '1.5px dashed ' + D.strong,
        }} />
        <div style={{ borderBottom: '1.5px dashed ' + D.strong }} />
        <span style={{
          position: 'absolute', left: '50%', top: 0, bottom: 0,
          borderLeft: '1.5px dashed ' + D.strong,
        }} />
      </div>
      {arrow('0.55s')}

      {/* Cammus Intelligence — same width and internal axis as Ready below:
          both cards are min(100%, 356px) with a 44px icon slot, so icons and
          text columns line up card-to-card under the center arrow. */}
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <div className="lp-pop" style={{
          '--d': '0.75s', width: 'min(100%, 356px)', boxSizing: 'border-box',
          background: D.card, border: '1px solid ' + D.strong,
          borderRadius: 'var(--radius-card)', padding: 'var(--space-6) var(--space-7)',
          display: 'flex', alignItems: 'center', gap: 'var(--space-5)',
        }}>
          <span style={{ width: 44, display: 'inline-flex', justifyContent: 'center', flex: 'none' }}>
            <ActionGlyph kind="brain" size={44} color={D.lime} />
          </span>
          <span style={{ display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
            <span style={{ color: D.white, fontWeight: 'var(--fw-bold)', fontSize: '1.15rem', letterSpacing: 'var(--track-text)', whiteSpace: 'nowrap' }}>Cammus Intelligence</span>
            <span style={{ color: D.muted, fontSize: '12px', lineHeight: 1.5, letterSpacing: 'var(--track-text)', whiteSpace: 'nowrap' }}>Structured and stored as<br />reusable company intelligence.</span>
          </span>
        </div>
      </div>

      {arrow('1s')}

      {/* Ready to produce — pale-lime highlight, same width and axis */}
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <div className="lp-pop" style={{
          '--d': '1.2s', width: 'min(100%, 356px)', boxSizing: 'border-box',
          background: D.paleLime, border: '1px solid ' + D.limeBorder,
          borderRadius: 'var(--radius-card)', padding: 'var(--space-5) var(--space-7)',
          display: 'flex', alignItems: 'center', gap: 'var(--space-5)',
        }}>
          <span style={{ width: 44, display: 'inline-flex', justifyContent: 'center', flex: 'none' }}>
            <ActionGlyph kind="bolt" size={36} color={D.greenText} />
          </span>
          <span style={{ display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
            <span style={{ color: D.ink, fontWeight: 'var(--fw-bold)', fontSize: '15px', letterSpacing: 'var(--track-text)', whiteSpace: 'nowrap' }}>Ready to produce</span>
            <span style={{ color: '#5A5A52', fontSize: '12px', lineHeight: 1.5, letterSpacing: 'var(--track-text)', whiteSpace: 'nowrap' }}>Content aligned with your brand<br />and commercial goals.</span>
          </span>
        </div>
      </div>
    </div>
  );
}

function SeeCammusSection() {
  const contacts = [
    { icon: 'whatsapp', label: '(85) 99186-3621', href: 'https://wa.me/5585991863621' },
    { icon: 'email', label: 'brendo@cammusai.com', href: 'mailto:brendo@cammusai.com' },
    { icon: 'linkedin', label: 'linkedin.com/in/brendo-da-luz', href: 'https://linkedin.com/in/brendo-da-luz' },
  ];
  return (
    <section id="action" data-screen-label="See Cammus in Action" style={{ background: 'var(--cam-surface-base)', borderTop: '1px solid var(--cam-border-subtle)' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--section-pad) var(--page-gutter)' }}>
        <div className="lp-action" style={{
          display: 'grid', gridTemplateColumns: 'minmax(300px, 1.1fr) minmax(300px, 1fr)',
          gap: 'var(--space-9)', alignItems: 'start',
        }}>
          {/* The five-minute promise */}
          <div className="lp-reveal">
            <div style={{
              color: D.faint, fontSize: 'var(--fs-eyebrow)',
              fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase',
              letterSpacing: 'var(--track-eyebrow)', marginBottom: 'var(--space-4)',
            }}>See Cammus in Action</div>
            <h2 className="lp-fit-h2" style={{
              margin: 0, fontSize: 'var(--fs-h1)', fontWeight: 'var(--fw-black)',
              letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
              color: D.white,
            }}><span className="lp-fit-line" style={{ whiteSpace: 'nowrap' }}>Turn your company</span>{' '}<br /><span className="lp-fit-line" style={{ whiteSpace: 'nowrap' }}>into a marketing</span>{' '}<br /><span className="lp-fit-line" style={{ whiteSpace: 'nowrap' }}>operation in five</span>{' '}<br /><span className="lp-fit-line" style={{ whiteSpace: 'nowrap' }}>minutes.</span></h2>
            <p style={{
              margin: 'var(--space-5) 0 0', fontSize: 'var(--fs-lead)',
              color: D.body, letterSpacing: 'var(--track-text)',
              lineHeight: 1.5, maxWidth: '48ch',
            }}>Cammus transforms your commercial DNA, brand DNA and brand guidelines into structured intelligence that powers every marketing workflow.</p>

            {/* THE lime signal — the CTA into the product */}
            <div style={{ marginTop: 'var(--space-7)', display: 'flex', alignItems: 'stretch', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
              <a href="https://app.cammusai.com" target="_blank" rel="noreferrer" style={{
                display: 'inline-flex', alignItems: 'center', gap: 'var(--space-5)',
                background: D.lime, color: D.ink,
                borderRadius: 'var(--radius-card)', padding: 'var(--space-4) var(--space-6)',
                textDecoration: 'none', borderBottom: 'none',
              }}>
                <span aria-hidden="true" style={{
                  width: 38, height: 38, borderRadius: '50%', flex: 'none',
                  border: '1px solid rgba(10, 10, 10, 0.45)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}><ActionGlyph kind="globe" size={22} color={D.ink} /></span>
                <span style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                  <span style={{ fontWeight: 'var(--fw-bold)', fontSize: 'var(--fs-small)', letterSpacing: 'var(--track-text)' }}>Try the product now</span>
                  <span style={{ fontWeight: 'var(--fw-semibold)', fontSize: '13px', letterSpacing: 'var(--track-text)', opacity: 0.8 }}>app.cammusai.com</span>
                </span>
                <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 'var(--space-3)' }}>
                  <span style={{ width: 16, height: 2, background: D.ink, borderRadius: 1 }} />
                  <span style={{
                    width: 0, height: 0, marginLeft: -1,
                    borderTop: '4.5px solid transparent', borderBottom: '4.5px solid transparent',
                    borderLeft: '6.5px solid ' + D.ink,
                  }} />
                </span>
              </a>
              <span style={{
                background: '#FFFFFF', border: '1px solid ' + D.cardBorder,
                borderRadius: 'var(--radius-card)', padding: 6,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <img src="assets/qr-app.png" alt="QR code to app.cammusai.com" draggable={false} style={{
                  width: 66, height: 66, display: 'block',
                }} />
              </span>
            </div>
            <p style={{
              margin: 'var(--space-5) 0 0', color: D.muted,
              fontSize: 'var(--fs-small)', lineHeight: 1.5, letterSpacing: 'var(--track-text)',
            }}>We onboard your company in 5 minutes,<br />and you're <span style={{ color: D.white, fontWeight: 'var(--fw-bold)' }}>ready to post</span>.</p>
          </div>

          {/* The knowledge funnel */}
          <KnowledgeFunnel />
        </div>

        {/* Footer strip — wordmark + infrastructure line + diligence contacts */}
        <div className="lp-group lp-action-footer" style={{
          marginTop: 'var(--beat-gap)', borderTop: '1px solid ' + D.cardBorder,
          paddingTop: 'var(--space-6)', display: 'flex', alignItems: 'center',
          columnGap: 'var(--space-6)', rowGap: 'var(--space-5)',
          flexWrap: 'wrap', justifyContent: 'space-between',
        }}>
          <div className="lp-item" style={{ '--d': '0s', display: 'flex', alignItems: 'center', gap: 'var(--space-4)', flex: '0 0 auto', flexWrap: 'wrap', maxWidth: '100%' }}>
            <Wordmark height={26} style={{ flex: 'none' }} />
            <span className="lp-foot-copy" style={{ color: D.white, fontWeight: 'var(--fw-bold)', fontSize: '12px', lineHeight: 1.45, letterSpacing: 'var(--track-text)', whiteSpace: 'nowrap' }}>
              We're raising our angel round, contact us<br />via our channels:
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            {contacts.map((c, i) => (
              <React.Fragment key={c.label}>
                {i > 0 && <span aria-hidden="true" style={{ color: D.white, fontWeight: 'var(--fw-bold)', fontSize: '12px' }}>•</span>}
                <a className="lp-item" href={c.href} target={c.href.indexOf('mailto:') === 0 ? undefined : '_blank'} rel="noreferrer" style={{
                  '--d': (0.15 + i * 0.12) + 's',
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  color: D.white, fontWeight: 'var(--fw-bold)',
                  fontSize: '12px', letterSpacing: 'var(--track-text)',
                  textDecoration: 'underline', textUnderlineOffset: '2.5px',
                  borderBottom: 'none', whiteSpace: 'nowrap',
                }}>
                  <ContactGlyph kind={c.icon} />
                  {c.label}
                </a>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.SeeCammusSection = SeeCammusSection;