// faq-final.jsx — FAQ accordion + Final CTA + Footer

function FAQ({ lang }) {
  const c = window.CONTENT[lang].faq;
  const [open, setOpen] = React.useState(0);
  return (
    <section id="sss" className="section anchor" style={{ background: 'var(--bg-soft)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="section-eyebrow">{c.eyebrow}</div>
          <h2 className="section-title" style={{ marginBottom: 18, width: "1024px" }}>{c.title}</h2>
        </div>

        <div style={{
          maxWidth: 820, display: 'flex', flexDirection: 'column', gap: 14
        }}>
          {c.items.map((it, i) =>
          <div key={i} className="card" style={{
            background: 'var(--surface)',
            padding: 0,
            overflow: 'hidden',
            boxShadow: open === i ? 'var(--shadow-3)' : 'var(--shadow-1)',
            transition: 'box-shadow .2s'
          }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{

              background: 'transparent',
              border: 0,
              padding: '22px 26px',
              textAlign: 'left',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              gap: 16,
              cursor: 'pointer',
              color: 'var(--ink)', width: "816px"
            }}>
                <span style={{
                fontFamily: 'var(--font-display)',
                fontSize: 18,
                fontWeight: 600,
                lineHeight: 1.25
              }}>
                  {it.q}
                </span>
                <span style={{
                flexShrink: 0,
                width: 36, height: 36,
                background: open === i ? 'var(--coral)' : 'var(--bg-soft)',
                border: '2px solid var(--line)',
                borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'all .2s',
                color: open === i ? '#fff' : 'var(--ink)',
                transform: open === i ? 'rotate(45deg)' : 'rotate(0)'
              }}>
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
                    <path d="M 12 5 V 19 M 5 12 H 19" />
                  </svg>
                </span>
              </button>
              {open === i &&
            <div style={{
              padding: '0 26px 24px',
              color: 'var(--ink-soft)',
              fontSize: 15.5,
              lineHeight: 1.6,
              borderTop: '1.5px dashed rgba(0,0,0,0.15)',
              paddingTop: 18,
              marginTop: 4
            }}>
                  {it.a}
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FinalCTA({ lang, openLead, ctaIdx }) {
  const c = window.CONTENT[lang].final;
  const hc = window.CONTENT[lang].hero;
  const ctaLabel = hc.ctaVariants[ctaIdx % hc.ctaVariants.length];

  return (
    <section className="section" style={{ paddingTop: 60, paddingBottom: 100 }}>
      <div className="wrap">
        <div style={{
          background: 'var(--ink)',
          color: 'var(--bg)',
          borderRadius: 'var(--radius-lg)',
          padding: '60px 56px',
          border: '2px solid var(--line)',
          boxShadow: '0 12px 0 var(--line)',
          position: 'relative',
          overflow: 'hidden'
        }} className="final-card">

          {/* decorative shapes */}
          <div style={{
            position: 'absolute', top: -40, right: -40,
            width: 200, height: 200,
            background: 'var(--coral)',
            borderRadius: '50%',
            opacity: 0.85
          }} />
          <div style={{
            position: 'absolute', bottom: -50, left: -30,
            width: 180, height: 180,
            background: 'var(--sun)',
            borderRadius: '50%',
            opacity: 0.7
          }} />
          <div className="float-sticker" style={{
            position: 'absolute', top: 30, right: 80,
            transform: 'rotate(20deg)'
          }}>
            <StarBurst color="var(--sun)" size={36} />
          </div>
          <div className="float-sticker" style={{
            position: 'absolute', bottom: 50, right: 30,
            transform: 'rotate(-10deg)'
          }}>
            <StarBurst color="var(--rose)" size={30} />
          </div>

          <div style={{ position: 'relative', zIndex: 2, maxWidth: 720 }}>
            <span style={{
              display: 'inline-block',
              padding: '6px 14px',
              background: 'var(--coral)',
              color: '#fff',
              border: '2px solid var(--bg)',
              borderRadius: 999,
              fontSize: 13,
              fontWeight: 700,
              letterSpacing: '0.06em',
              textTransform: 'uppercase',
              marginBottom: 22
            }}>{c.eyebrow}</span>
            <h2 style={{
              color: 'var(--bg)',
              fontSize: 'clamp(34px, 5vw, 56px)',
              marginBottom: 18
            }}>{c.title}</h2>
            <p style={{
              fontSize: 19,
              color: 'rgba(255,255,255,0.88)',
              maxWidth: 580,
              marginBottom: 30,
              lineHeight: 1.5
            }}>{c.lede}</p>

            <ul style={{
              listStyle: 'none', padding: 0, margin: '0 0 36px',
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
              gap: '10px 24px'
            }}>
              {c.benefits.map((b, i) =>
              <li key={i} style={{
                display: 'flex', gap: 10, alignItems: 'flex-start',
                fontSize: 15.5, color: 'var(--bg)'
              }}>
                  <span style={{
                  flexShrink: 0,
                  width: 24, height: 24,
                  background: 'var(--leaf)',
                  border: '2px solid var(--bg)',
                  borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginTop: 1
                }}>
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M 4 12 L 9 17 L 20 6" />
                    </svg>
                  </span>
                  {b}
                </li>
              )}
            </ul>

            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
              <button className="btn" onClick={openLead} style={{
                fontSize: 18,
                padding: '18px 32px',
                background: 'var(--coral)',
                color: '#fff',
                border: '2px solid var(--bg)',
                boxShadow: '0 6px 0 var(--bg)'
              }}>
                {ctaLabel}
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                  <path d="M5 12 H 19 M 13 6 L 19 12 L 13 18" />
                </svg>
              </button>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', fontWeight: 500 }}>
                {c.footnote}
              </span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 720px){
          .final-card { padding: 40px 28px !important; }
        }
      `}</style>
    </section>);

}

function Footer({ lang, openLead }) {
  const c = window.CONTENT[lang].footer;
  return (
    <footer id="guide" style={{
      background: 'var(--ink)',
      color: 'var(--bg)',
      padding: '70px 0 30px',
      borderTop: '2px solid var(--line)'
    }}>
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr repeat(3, 1fr)',
          gap: 40,
          marginBottom: 50
        }} className="footer-grid">
          <div>
            <div style={{ marginBottom: 16, filter: 'invert(0)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                <svg viewBox="0 0 40 40" width="36" height="36">
                  <rect x="2" y="2" width="36" height="36" rx="10" fill="var(--coral)" stroke="var(--bg)" strokeWidth="2.5" />
                  <path d="M 12 28 L 12 14 L 22 14 M 12 21 L 20 21 M 28 14 L 28 28" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                  <circle cx="32" cy="10" r="4" fill="var(--sun)" stroke="var(--bg)" strokeWidth="2" />
                </svg>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--sun)' }}>FutureLabs - AI Creators

                </span>
              </span>
            </div>
            <p style={{ color: 'var(--bg)', opacity: 0.85, fontSize: 15, lineHeight: 1.55, marginBottom: 18, maxWidth: 320 }}>
              {c.tagline}
            </p>
            <div style={{ fontSize: 14, color: 'var(--rose)', marginBottom: 4, fontWeight: 600 }}>
              <strong>{c.brand}</strong>
            </div>
            <a href={`mailto:${c.email}`} style={{
              fontSize: 14, color: 'var(--sun)', borderBottom: '1px dashed currentColor'
            }}>
              {c.email}
            </a>
          </div>

          {c.cols.map((col, i) => {
            const titleColor = ['var(--coral)', 'var(--sky)', 'var(--leaf)'][i % 3];
            const linkColor = ['var(--sun)', 'var(--rose)', 'var(--bg)'][i % 3];
            return (
              <div key={i}>
              <div style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 13, fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.08em',
                  color: titleColor,
                  marginBottom: 16
                }}>{col.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map((it, j) =>
                  <li key={j}>
                    <a href="#" style={{
                      fontSize: 14.5, color: linkColor, opacity: 0.85,
                      transition: 'opacity .15s'
                    }}
                    onMouseEnter={(e) => e.target.style.opacity = 1}
                    onMouseLeave={(e) => e.target.style.opacity = 0.85}>
                      {it}</a>
                  </li>
                  )}
              </ul>
            </div>);

          })}
        </div>

        <div style={{
          borderTop: '1.5px dashed rgba(255,255,255,0.2)',
          paddingTop: 22,
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 16,
          alignItems: 'center',
          fontSize: 13
        }}>
          <div style={{ color: 'var(--bg)', opacity: 0.65 }}>{c.copy}</div>
          <button onClick={openLead} style={{
            background: 'transparent',
            border: '1.5px solid var(--sun)',
            color: 'var(--sun)',
            padding: '8px 16px',
            borderRadius: 999,
            fontSize: 13,
            fontWeight: 700
          }}>
            {window.CONTENT[lang].nav.cta} →
          </button>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px){
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
        }
        @media (max-width: 520px){
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>);

}

Object.assign(window, { FAQ, FinalCTA, Footer });