/* KiAuditPage.jsx (EN) — /ki-audit landing page */

const AuditProblem = () => (
  <section className="section-sm aurora grain-light" data-screen-label="AuditProblem" style={{ paddingTop: 'clamp(72px, 8vw, 128px)', paddingBottom: 'clamp(72px, 8vw, 128px)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 6vw, 120px)', alignItems: 'start' }} className="pp-grid">
        <div>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 24 }}>
            <span className="eyebrow-dot" /> Starting point
          </div>
        </div>
        <div>
          <p style={{ fontSize: 'clamp(22px, 2vw, 28px)', lineHeight: 1.45, color: 'var(--fg-1)', margin: 0, maxWidth: '40ch', textWrap: 'balance', letterSpacing: '-0.01em' }}>
            Many companies have already done initial AI experiments. What's missing is a systematic overview, clear priorities, and a partner who not only analyzes but also implements.
          </p>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 880px) { .pp-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
  </section>
);

const AuditProcess = () => {
  const phases = [
    { num: '01', label: 'Phase One', weeks: 'Week 1 to 2', title: 'Identify the problem', body: 'Kickoff conversation and current-state analysis. Department by department, we document where time and money are lost. Most of it runs remote, supplemented by one to two days on-site.', icon: <window.Icon.Search size={28} /> },
    { num: '02', label: 'Phase Two', weeks: 'Week 2 to 3', title: 'Prioritize solutions', body: 'From the analysis, we develop concrete use cases. We evaluate each measure by effort, benefit, and feasibility.', icon: <window.Icon.Spark size={28} /> },
    { num: '03', label: 'Phase Three', weeks: 'Week 3 to 4', title: 'Roadmap', body: 'You receive a finished roadmap: what gets implemented, in what order, with what costs and what expected benefit. Including a decision template for management or board.', icon: <window.Icon.Compass size={28} /> },
  ];
  return (
    <section className="section bg-soft" data-screen-label="AuditProcess">
      <div className="container">
        <div style={{ maxWidth: 820, marginBottom: 'clamp(56px, 7vw, 96px)' }}>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
            <span className="eyebrow-dot" /> The process
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            From problem to roadmap in <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>14 to 28 days.</em>
          </h2>
        </div>
        <div className="timeline">
          {phases.map((p, i) => (
            <article key={p.num} className="timeline-phase r-up lift" style={{ transitionDelay: (80 + i*120) + 'ms' }}>
              <div className="timeline-icon" aria-hidden>{p.icon}</div>
              <header className="timeline-meta">
                <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
                  {p.label}
                </span>
                <span style={{ flex: 1, height: 1, background: 'var(--border-hairline)', margin: '0 8px' }} />
                <span className="timeline-weeks" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)', letterSpacing: '0.02em', whiteSpace: 'nowrap' }}>
                  {p.weeks}
                </span>
              </header>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(32px, 3vw, 44px)', fontWeight: 400, fontStyle: 'italic', lineHeight: 1.05, letterSpacing: '-0.02em', margin: '24px 0 20px', color: 'var(--fg-1)' }}>
                {p.title}
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: '48ch' }}>
                {p.body}
              </p>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); }
        .timeline-phase { background: #fff; padding: clamp(32px, 3vw, 56px); min-height: 360px; display: flex; flex-direction: column; }
        .timeline-icon { color: var(--color-accent); margin-bottom: 32px; width: 56px; height: 56px; border: 1px solid var(--border-hairline); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(21,84,168,0.05) 0%, transparent 60%); }
        .timeline-meta { display: flex; align-items: center; gap: 16px; }
        @media (max-width: 880px) { .timeline { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

const AuditDeliverables = () => {
  const items = [
    'Current-state analysis of your AI maturity and process landscape',
    'Prioritized list of identified use cases',
    'Implementation roadmap for the next 12 months',
    'Cost-benefit assessment per measure',
    'Decision template for management',
  ];
  return (
    <section className="section" data-screen-label="AuditDeliverables" style={{ position: 'relative', background: '#fff' }}>
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 'var(--gutter)', right: 'var(--gutter)', height: 1, background: 'linear-gradient(90deg, transparent, rgba(21,84,168,0.18), transparent)' }} />
      <div className="container">
        <div className="deliv-grid">
          <div>
            <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
              <span className="eyebrow-dot" /> What you receive
            </div>
            <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
              Not a report. A <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>basis for decisions.</em>
            </h2>
          </div>
          <ul className="deliv-list">
            {items.map((text, i) => (
              <li key={i} className="deliv-item r-up" style={{ transitionDelay: (80 + i*80) + 'ms' }}>
                <span className="deliv-bullet" aria-hidden />
                <span className="deliv-text">{text}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <style>{`
        .deliv-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
        .deliv-list { list-style: none; padding: 0; margin: 0; }
        .deliv-item { display: grid; grid-template-columns: 32px 1fr; gap: 24px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--border-hairline); }
        .deliv-item:last-child { border-bottom: 1px solid var(--border-hairline); }
        .deliv-bullet { width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent); margin-top: 12px; justify-self: end; }
        .deliv-text { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: var(--fg-1); letter-spacing: -0.005em; }
        @media (max-width: 880px) {
          .deliv-grid { grid-template-columns: 1fr; }
          .deliv-item { grid-template-columns: 24px 1fr; gap: 16px; }
        }
      `}</style>
    </section>
  );
};

const AuditFAQ = () => {
  const items = [
    { q: 'What does the AI Audit cost?', a: 'Pricing information is shared in the personal initial call. Conditions depend on company size and scope. Often a substantial part is covered by funding programs.' },
    { q: 'Do we need to be on-site for it?', a: 'The largest part of the audit runs remote. We plan one to two days on-site, coordinated with your location and team.' },
    { q: 'Who is the AI Audit suitable for?', a: 'Owner-led companies with 15 to 180 employees who want to address AI potential in a structured way.' },
    { q: 'What happens after the audit?', a: 'You decide. The roadmap belongs to you. Many clients then commission us with the implementation of individual measures, but it is not a requirement.' },
    { q: 'How quickly can we start?', a: 'After the initial call, we usually start within one to two weeks.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" data-screen-label="AuditFAQ" style={{ position: 'relative', background: '#fff' }}>
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 'var(--gutter)', right: 'var(--gutter)', height: 1, background: 'linear-gradient(90deg, transparent, rgba(21,84,168,0.18), transparent)' }} />
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
              <span className="eyebrow-dot" /> Common questions
            </div>
            <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
              What managing directors <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>want to know.</em>
            </h2>
          </div>
          <div className="faq-list">
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className="faq-item">
                  <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                    <span style={{ flex: 1 }}>{it.q}</span>
                    <span className={'faq-chevron' + (isOpen ? ' is-open' : '')} aria-hidden>+</span>
                  </button>
                  {isOpen && (
                    <div className="faq-a">{it.a}</div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <style>{`
        .faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
        .faq-list { border-top: 1px solid var(--border-strong); }
        .faq-item { border-bottom: 1px solid var(--border-hairline); }
        .faq-q { display: flex; align-items: center; width: 100%; padding: 28px 0; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; color: var(--fg-1); text-align: left; letter-spacing: -0.01em; }
        .faq-q:hover { opacity: 0.72; }
        .faq-chevron { font-size: 22px; color: var(--fg-3); font-weight: 300; transition: transform 260ms var(--ease-out); margin-left: 20px; }
        .faq-chevron.is-open { transform: rotate(45deg); color: var(--color-accent); }
        .faq-a { padding: 0 0 28px 0; font-size: 16px; line-height: 1.6; color: var(--fg-2); max-width: 60ch; }
        @media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { AuditProblem, AuditProcess, AuditDeliverables, AuditFAQ });
