// Landing page sections — Kalbomatas hi-fi

const { useState: useStateL, useEffect: useEffectL } = React;

// ---- Hero ----
function Hero({ lang }) {
  const t = useT(lang);
  const h = t.hero;
  return (
    <section style={{ paddingTop: 96, paddingBottom: 72, position: 'relative', overflow: 'hidden', background: '#fff' }}>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <h1 style={{ maxWidth: 980 }}>
          {h.h1}{' '}
          <span style={{ position: 'relative', display: 'inline', color: 'var(--green)' }}>
            <span style={{
              backgroundImage: 'linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 94%, transparent 94%)',
              backgroundRepeat: 'no-repeat',
              borderRadius: 4,
              padding: '0 0.04em',
            }}>{h.h1Accent}</span>
          </span>
        </h1>
        <p className="lead mt-6" style={{ maxWidth: 680, fontSize: 19 }}>{h.sub}</p>
        <div className="flex gap-3 mt-8 flex-wrap">
          <a href={'pricing.html?lang=' + lang} className="btn green xl" style={{ paddingLeft: 44, paddingRight: 44 }}>{h.ctaPrimary} →</a>
          <a href="#tools" className="btn ghost lg">{h.ctaSecondary}</a>
        </div>
        <div className="mt-12 flex items-center gap-3" style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>
          <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--green)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          </span>
          <span>{h.proof}</span>
        </div>
      </div>

      {/* Mock app surface */}
      <div className="container mt-12">
        <HeroMock lang={lang} />
      </div>
    </section>
  );
}

// Mock UI — interactive, switchable tools
function HeroMock({ lang }) {
  const [active, setActive] = useStateL('pron');
  const PaneComponent = window.PANES[active];
  const activeTool = window.TOOL_LIST.find(t => t.id === active);
  return (
    <div style={{
      background: 'var(--ink)',
      borderRadius: 'var(--r-xl)',
      padding: '6px',
      boxShadow: 'var(--shadow-xl)',
      maxWidth: 1080,
      margin: '0 auto',
    }}>
      {/* window chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px' }}>
        <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f57' }}></span>
        <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#febc2e' }}></span>
        <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28c840' }}></span>
        <span style={{
          marginLeft: 14,
          padding: '4px 12px',
          borderRadius: 999,
          background: 'rgba(247,243,234,0.08)',
          fontFamily: 'var(--mono)',
          fontSize: 11,
          color: 'rgba(247,243,234,0.65)',
          letterSpacing: '0.01em',
        }}>kalbomatas.lt/app/{activeTool.url}</span>
      </div>

      <div style={{ background: 'var(--paper)', borderRadius: 22, overflow: 'hidden', display: 'grid', gridTemplateColumns: '260px 1fr', minHeight: 520 }}>
        {/* sidebar */}
        <div style={{ background: 'var(--paper-2)', padding: '20px 14px' }}>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 500, paddingLeft: 10, marginBottom: 12 }}>Tools</div>
          {window.TOOL_LIST.map((it) => {
            const isActive = it.id === active;
            return (
              <button
                key={it.id}
                onClick={() => setActive(it.id)}
                style={{
                  width: '100%',
                  display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
                  borderRadius: 8, fontSize: 14, textAlign: 'left',
                  background: isActive ? 'var(--paper)' : 'transparent',
                  color: isActive ? 'var(--ink)' : 'var(--ink-2)',
                  fontWeight: isActive ? 500 : 400,
                  fontFamily: 'var(--sans)',
                  transition: 'background .15s, color .15s',
                  cursor: 'pointer',
                  marginBottom: 2,
                  boxShadow: isActive ? 'var(--shadow-sm)' : 'none',
                }}
                onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = 'rgba(13,20,16,0.04)'; }}
                onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
              >
                <Ic name={it.icon} size={16} style={{ color: isActive ? 'var(--green-deep)' : 'var(--ink-3)' }} />
                <span>{it.name}</span>
              </button>
            );
          })}
          <div style={{ marginTop: 22, padding: '14px', background: 'var(--green-soft)', borderRadius: 10 }}>
            <div style={{ fontSize: 12, color: 'var(--green-deep)', marginBottom: 6, fontWeight: 500 }}>Daily limit</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--green-deep)', fontWeight: 600 }}>22</span>
              <span style={{ color: 'var(--ink-2)', fontSize: 13 }}>/ 30 min</span>
            </div>
            <div style={{ height: 4, background: 'rgba(31,90,40,0.15)', borderRadius: 99, marginTop: 8, overflow: 'hidden' }}>
              <div style={{ width: '73%', height: '100%', background: 'var(--green-deep)' }}></div>
            </div>
          </div>
        </div>

        {/* main pane */}
        <div key={active} style={{ padding: '28px 32px', display: 'flex', flexDirection: 'column', animation: 'paneIn .25s ease-out' }}>
          <PaneComponent />
        </div>
      </div>
      <style>{`@keyframes paneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }`}</style>
    </div>
  );
}

// ---- Tools grid (8 tools) — bento layout ----
// Each tool gets a {col, row} span on a 4-col grid. Auto-flow dense packs them.
const BENTO = [
  { col: 2, row: 2, hero: true }, // 0 Pronunciation — hero
  { col: 1, row: 1 },             // 1 Conversation
  { col: 1, row: 1 },             // 2 Level
  { col: 2, row: 1, wide: true }, // 3 Grammar
  { col: 1, row: 1 },             // 4 Dictionary
  { col: 1, row: 1 },             // 5 Reader
  { col: 2, row: 1, wide: true }, // 6 Extension
  { col: 4, row: 1, wide: true }, // 7 Mentor — full-width footer
];

function Tools({ lang }) {
  const t = useT(lang);
  const tt = t.tools;
  return (
    <section id="tools" style={{ background: 'var(--paper)', paddingTop: 120, paddingBottom: 120 }}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 72 }}>
          <h2>{tt.h2}</h2>
          <p className="lead mt-4">{tt.sub}</p>
        </div>

        <div className="bento-grid">
          {tt.list.map((tool, i) => (
            <ToolCard key={i} tool={tool} index={i} cell={BENTO[i] || { col: 1, row: 1 }} />
          ))}
        </div>
      </div>
    </section>
  );
}

// Distinct color theme per feature card — Tools is the one colorful section
const TOOL_THEMES = [
  // 0 Pronunciation - green
  { bg: '#e8f5ed', accent: 'var(--green-deep)', chip: 'var(--green)', chipText: '#fff' },
  // 1 Level checker - yellow
  { bg: '#fdf3d4', accent: '#8a6a10', chip: 'var(--yellow)', chipText: 'var(--ink)' },
  // 2 Grammar - red/coral
  { bg: '#fbe9ea', accent: '#9c2126', chip: '#c1272d', chipText: '#fff' },
  // 3 Reader - blue
  { bg: '#e6eeff', accent: '#2240a3', chip: '#3a5fcf', chipText: '#fff' },
  // 4 News - lavender
  { bg: '#efe9fb', accent: '#5b3aa8', chip: '#7a59c8', chipText: '#fff' },
  // 5 Vocab - teal
  { bg: '#daf1ee', accent: '#0f6661', chip: '#2c8c85', chipText: '#fff' },
  // 6 Writing - orange/peach
  { bg: '#ffe9d6', accent: '#9c4f0e', chip: '#d97724', chipText: '#fff' },
  // 7 Speaking - dark/ink
  { bg: 'var(--ink)', accent: 'var(--yellow)', chip: 'var(--yellow)', chipText: 'var(--ink)', dark: true },
];

function ToolCard({ tool, index, cell }) {
  const Preview = window.TOOL_PREVIEWS[index];
  const iconName = window.TOOL_ICONS[index];
  const theme = TOOL_THEMES[index] || TOOL_THEMES[0];
  const dark = theme.dark;
  // wide cells get a 2-column inner layout (text left, preview right)
  const horizontal = cell.wide && !cell.hero;

  const header = (
    <div className="flex items-center gap-3">
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: theme.chip,
        color: theme.chipText,
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}>
        <Ic name={iconName} size={20} />
      </div>
      <h3 style={{ fontFamily: 'var(--display)', fontSize: cell.hero ? 26 : 22, lineHeight: 1.15, fontWeight: 700, color: dark ? 'var(--paper)' : 'var(--ink)' }}>{tool.name}</h3>
    </div>
  );

  const body = (
    <p style={{ fontSize: 15, lineHeight: 1.55, color: dark ? 'rgba(247,243,234,0.78)' : 'var(--ink-2)', flex: 1, margin: 0 }}>{tool.body}</p>
  );

  return (
    <article
      data-bento-col={cell.col}
      data-bento-row={cell.row}
      style={{
        gridColumn: 'span ' + cell.col,
        gridRow: 'span ' + cell.row,
        background: theme.bg,
        color: dark ? 'var(--paper)' : 'var(--ink)',
        borderRadius: 'var(--r-lg)',
        padding: cell.hero ? 44 : 36,
        position: 'relative', overflow: 'hidden',
        display: 'flex',
        flexDirection: horizontal ? 'row' : 'column',
        gap: horizontal ? 36 : 24,
        alignItems: horizontal ? 'center' : 'stretch',
      }}>
      {horizontal ? (
        <>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 18 }}>
            {header}
            {body}
          </div>
          {Preview && (
            <div style={{ flex: 1, minWidth: 0 }}>
              <Preview />
            </div>
          )}
        </>
      ) : (
        <>
          {header}
          {Preview && <div><Preview /></div>}
          {body}
        </>
      )}
    </article>
  );
}

// ---- Methodology ----
function Method({ lang }) {
  const t = useT(lang);
  const m = t.method;
  return (
    <section id="method">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }} className="method-grid">
          <div>
            <h2>{m.h2}</h2>
            <p className="lead mt-6">{m.body}</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {m.bullets.map((b, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '160px 1fr', gap: 32,
                padding: '24px 0',
                borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--hairline)',
                borderBottom: i === m.bullets.length - 1 ? '1px solid var(--ink)' : 'none',
              }}>
                <div style={{ fontFamily: 'var(--display)', fontSize: 19, fontWeight: 500, color: 'var(--green-deep)' }}>{b.k}</div>
                <div style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)' }}>{b.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .method-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
    </section>
  );
}

// ---- Audience — restrained cards with real portrait imagery ----
// Portraits via randomuser.me (stable URLs, public domain) — swap for real customer photos
const PERSONA_VISUALS = [
  { photo: 'https://randomuser.me/api/portraits/men/32.jpg',   countryFlag: 'by', accent: 'var(--green-deep)', deadline: '8 mo',  doc: 'B1 · Permanent residency' },
  { photo: 'https://randomuser.me/api/portraits/women/65.jpg', countryFlag: 'ua', accent: 'var(--red)',        deadline: '6 mo',  doc: 'A2 · School parent' },
  { photo: 'https://randomuser.me/api/portraits/men/22.jpg',   countryFlag: 'in', accent: '#2240a3',           deadline: '4 mo',  doc: 'A2 · Work permit' },
  { photo: 'https://randomuser.me/api/portraits/women/40.jpg', countryFlag: 'ng', accent: '#0f6661',           deadline: '12 mo', doc: 'B2 · Citizenship' },
];

const FLAG_CDN = 'https://cdn.jsdelivr.net/gh/HatScripts/circle-flags@latest/flags/';

function PersonaCard({ p, v, idx }) {
  return (
    <article style={{ display: 'flex', flexDirection: 'column' }}>
      {/* Big image-first portrait — fills the top of the card */}
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 5',
        borderRadius: 'var(--r-lg)',
        overflow: 'hidden',
        background: 'var(--paper-2)',
      }}>
        <img
          src={v.photo}
          alt={p.who}
          loading="lazy"
          style={{
            width: '100%', height: '100%',
            objectFit: 'cover', display: 'block',
          }}
        />
        {/* dark gradient bottom for legibility of the overlay */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to top, rgba(13,20,16,0.78) 0%, rgba(13,20,16,0.25) 35%, transparent 60%)',
        }}></div>
        {/* country flag, top-left */}
        <img
          src={FLAG_CDN + v.countryFlag + '.svg'}
          alt=""
          width={32}
          height={32}
          style={{
            position: 'absolute', top: 16, left: 16,
            width: 32, height: 32, borderRadius: '50%',
            boxShadow: '0 2px 8px rgba(0,0,0,0.25)',
          }}
        />
        {/* deadline pill, top-right */}
        <div style={{
          position: 'absolute', top: 16, right: 16,
          padding: '6px 12px',
          borderRadius: 999,
          background: 'rgba(255,255,255,0.92)',
          backdropFilter: 'blur(6px)',
          fontSize: 12, fontWeight: 600,
          color: 'var(--ink)',
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <Ic name="clock" size={12} />
          <span>{v.deadline}</span>
        </div>
        {/* name + need overlay, bottom */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          padding: '20px 22px 22px',
          color: '#fff',
        }}>
          <div style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.01em' }}>
            {p.who}
          </div>
          <div style={{ marginTop: 6, fontSize: 13.5, color: 'rgba(255,255,255,0.85)' }}>
            {v.doc}
          </div>
        </div>
      </div>

      {/* quote-style detail below the image — no card chrome */}
      <p style={{
        marginTop: 18,
        fontSize: 15.5,
        lineHeight: 1.55,
        color: 'var(--ink-2)',
        paddingLeft: 16,
        borderLeft: '3px solid ' + v.accent,
      }}>
        {p.detail}
      </p>
    </article>
  );
}

function Audience({ lang }) {
  const t = useT(lang);
  const a = t.audience;
  return (
    <section style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <h2>{a.h2}</h2>
          <p className="lead mt-4">{a.sub}</p>
        </div>
        <div className="grid grid-4" style={{ gap: 24 }}>
          {a.personas.map((p, i) => (
            <PersonaCard key={i} p={p} v={PERSONA_VISUALS[i]} idx={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Pricing teaser — restrained: one accented tier, white otherwise ----
function PricingTeaser({ lang }) {
  const t = useT(lang);
  const p = t.pricing;
  return (
    <section style={{ background: 'var(--paper)' }}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <h2>{p.h2}</h2>
          <p className="lead mt-4">{p.sub}</p>
        </div>
        <div className="grid grid-3" style={{ gap: 20 }}>
          {p.tiers.map((tier, i) => {
            const popular = tier.popular;
            return (
              <div key={i} style={{
                background: popular ? 'var(--ink)' : 'var(--paper)',
                color: popular ? '#fff' : 'var(--ink)',
                padding: 36,
                borderRadius: 'var(--r-lg)',
                border: popular ? 'none' : '1px solid var(--hairline)',
                position: 'relative',
                display: 'flex', flexDirection: 'column',
                minHeight: 280,
                boxShadow: popular ? 'var(--shadow-lg)' : 'none',
              }}>
                {popular && (
                  <span style={{
                    position: 'absolute', top: 24, right: 24,
                    padding: '4px 10px', fontSize: 11, fontWeight: 600,
                    background: 'var(--yellow)', color: 'var(--ink)',
                    borderRadius: 'var(--r-pill)',
                  }}>{p.popular}</span>
                )}
                <h3 style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 700, color: popular ? 'var(--yellow)' : 'var(--green-deep)' }}>{tier.name}</h3>
                <div style={{ marginTop: 18, marginBottom: 8, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontFamily: 'var(--display)', fontSize: 52, fontWeight: 800, letterSpacing: '-0.03em', color: popular ? '#fff' : 'var(--ink)' }}>{tier.price}</span>
                  <span style={{ color: popular ? 'rgba(255,255,255,0.6)' : 'var(--ink-3)', fontSize: 15 }}>{p.perMonth}</span>
                </div>
                <div style={{ fontSize: 14.5, color: popular ? 'rgba(255,255,255,0.8)' : 'var(--ink-2)', marginBottom: 24, flex: 1, lineHeight: 1.5 }}>{tier.tagline}</div>
                <a href={'pricing.html?lang=' + lang} className="btn lg" style={{
                  width: '100%', justifyContent: 'center',
                  background: popular ? 'var(--yellow)' : 'var(--ink)',
                  color: popular ? 'var(--ink)' : '#fff',
                  border: 'none',
                }}>{p.cta} →</a>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---- FAQ ----
function FAQ({ lang }) {
  const t = useT(lang);
  const f = t.faq;
  const [open, setOpen] = useStateL(0);
  return (
    <section>
      <div className="container-narrow">
        <div style={{ marginBottom: 40 }}>
          <h2>{f.h2}</h2>
        </div>
        <div>
          {f.list.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--hairline)', borderBottom: i === f.list.length - 1 ? '1px solid var(--ink)' : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', textAlign: 'left', padding: '22px 0',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em',
                  color: 'var(--ink)',
                }}>
                  <span style={{ flex: 1, paddingRight: 24 }}>{item.q}</span>
                  <span style={{ width: 18, height: 18, display: 'grid', placeItems: 'center', flexShrink: 0, transition: 'transform .25s', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', color: 'var(--ink-3)' }}>
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
                  </span>
                </button>
                <div style={{ maxHeight: isOpen ? 400 : 0, overflow: 'hidden', transition: 'max-height .3s ease' }}>
                  <p style={{ paddingBottom: 22, fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 720 }}>{item.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---- Final CTA — yellow card with brand-geometry decorations ----
function FinalCTA({ lang }) {
  const t = useT(lang);
  const c = t.finalCta;
  return (
    <section style={{ paddingTop: 64, paddingBottom: 96 }}>
      <div className="container">
        <div style={{
          background: 'var(--yellow)',
          color: 'var(--ink)',
          borderRadius: 'var(--r-xl)',
          padding: '96px 56px',
          textAlign: 'center',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* Brand geometry — same triangle/drop language as the logo, anchored to corners */}
          {/* top-left: green double triangle */}
          <svg aria-hidden="true" style={{ position: 'absolute', left: 0, top: 0, width: 180, height: 180 }} viewBox="0 0 180 180" fill="none">
            <path d="M180 0L0 180V0H180Z" fill="var(--green)" />
            <path d="M180 90L90 180H180V90Z" fill="var(--green-deep)" />
          </svg>
          {/* bottom-right: white triangle (echoes logo) */}
          <svg aria-hidden="true" style={{ position: 'absolute', right: 0, bottom: 0, width: 220, height: 220 }} viewBox="0 0 220 220" fill="none">
            <path d="M220 220L0 220L220 0V220Z" fill="#ffffff" />
          </svg>
          {/* bottom-right inner: ink triangle layered for depth */}
          <svg aria-hidden="true" style={{ position: 'absolute', right: 0, bottom: 0, width: 110, height: 110 }} viewBox="0 0 110 110" fill="none">
            <path d="M110 110L0 110L110 0V110Z" fill="var(--ink)" />
          </svg>
          {/* top-right: red drop, on-grid (no rotation gimmick) */}
          <svg aria-hidden="true" style={{ position: 'absolute', right: 60, top: 56, width: 64, height: 42 }} viewBox="0 0 24 16" fill="none">
            <path d="M12.4261 0C5.56336 0 0 7.67043 0 7.67043C0 7.67043 5.56336 15.3409 12.4261 15.3409C19.2889 15.3409 23.0114 11.9067 23.0114 7.67043C23.0114 3.43415 19.2889 0 12.4261 0Z" fill="var(--red)" />
          </svg>
          {/* bottom-left: blue triangle */}
          <svg aria-hidden="true" style={{ position: 'absolute', left: 64, bottom: 56, width: 48, height: 48 }} viewBox="0 0 48 48" fill="none">
            <path d="M48 48L0 48L48 0V48Z" fill="#3a5fcf" />
          </svg>

          <div style={{ position: 'relative', zIndex: 1 }}>
            <h2 style={{ maxWidth: 760, margin: '0 auto', fontSize: 'clamp(36px, 5vw, 60px)', color: 'var(--ink)', fontWeight: 800, lineHeight: 1.05 }}>{c.h2}</h2>
            <p className="lead mt-6" style={{ color: 'var(--ink-2)', maxWidth: 540, margin: '20px auto 0' }}>{c.sub}</p>
            <div className="mt-8" style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
              <a href={'pricing.html?lang=' + lang} className="btn xl" style={{ background: 'var(--ink)', color: '#fff', paddingLeft: 44, paddingRight: 44 }}>{c.cta} →</a>
            </div>
            <div className="mt-8" style={{ fontSize: 13, color: 'var(--ink-2)', opacity: 0.7 }}>{c.note}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Tools, Method, Audience, PricingTeaser, FAQ, FinalCTA });