// SolutionShell: reusable layout for all 5 solution deep-pages.
// Pages pass data (eyebrow, hero, problem, features, trust, pricing, faq, cta)
// and the shell renders the standard sections in the standard order.

const SolHero = ({ eyebrow, title, subtitle, ctaLabel, onCTA, mockup }) => (
  <section style={{ padding: '96px 24px 64px', background:'#fff' }}>
    <div style={{
      maxWidth: 1200, margin:'0 auto',
      display:'grid', gridTemplateColumns: mockup ? '1fr 1fr' : '1fr',
      gap: 64, alignItems:'center',
    }}>
      <div>
        <div style={{
          display:'inline-flex', alignItems:'center', gap: 8,
          padding:'6px 12px', borderRadius: 999, background:'#FFF6BF',
          font:'500 12px Roboto, sans-serif', letterSpacing:'0.04em',
          textTransform:'uppercase', color:'#0A0A0A', marginBottom: 24,
        }}>
          <Icon name={eyebrow.icon} size={12} stroke={2}/> {eyebrow.label}
        </div>
        <h1 style={{
          font:'700 56px/1.05 Roboto, sans-serif', letterSpacing:'-0.02em',
          margin:'0 0 20px', textWrap:'balance',
        }}>{title}</h1>
        <p style={{
          font:'400 19px/1.55 Roboto, sans-serif', color:'#525252',
          margin:'0 0 32px', textWrap:'pretty', maxWidth: 520,
        }}>{subtitle}</p>
        <button onClick={onCTA} style={{
          height: 52, padding:'0 24px', border:'none', borderRadius: 8,
          background:'#FFD500', color:'#0A0A0A',
          font:'600 15px Roboto, sans-serif', cursor:'pointer',
          display:'inline-flex', alignItems:'center', gap: 8,
        }}>
          {ctaLabel} <Icon name="arrowRight" size={14} stroke={2}/>
        </button>
      </div>
      {mockup}
    </div>
  </section>
);

const SolProblem = ({ title, lead, bullets, sting }) => (
  <section style={{ padding:'72px 24px', background:'#FAFAFA', borderTop:'1px solid #E5E5E5', borderBottom:'1px solid #E5E5E5' }}>
    <div style={{ maxWidth: 1000, margin:'0 auto' }}>
      <h2 style={{ font:'700 36px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 20px', textWrap:'balance' }}>{title}</h2>
      {lead && <p style={{ font:'400 17px/1.6 Roboto, sans-serif', color:'#525252', margin:'0 0 24px' }}>{lead}</p>}
      <ul style={{ margin:'0 0 24px', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap: 12 }}>
        {bullets.map((b,i)=>(
          <li key={i} style={{ display:'flex', gap: 12, font:'400 16px/1.5 Roboto, sans-serif', color:'#0A0A0A' }}>
            <span style={{ width: 6, height: 6, borderRadius:'50%', background:'#FFD500', marginTop: 9, flexShrink:0 }}/>
            <span dangerouslySetInnerHTML={{ __html: b }}/>
          </li>
        ))}
      </ul>
      {sting && (
        <div style={{
          padding: 20, borderLeft:'3px solid #FFD500', background:'#fff',
          font:'500 16px/1.5 Roboto, sans-serif', color:'#0A0A0A',
        }}>{sting}</div>
      )}
    </div>
  </section>
);

const SolFeatures = ({ kicker, title, items }) => (
  <section style={{ padding:'96px 24px', background:'#fff' }}>
    <div style={{ maxWidth: 1200, margin:'0 auto' }}>
      <div style={{ maxWidth: 720, marginBottom: 56 }}>
        {kicker && (
          <div style={{ font:'500 12px Roboto, sans-serif', letterSpacing:'0.08em', textTransform:'uppercase', color:'#737373', marginBottom: 12 }}>
            {kicker}
          </div>
        )}
        <h2 style={{ font:'700 40px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin: 0, textWrap:'balance' }}>{title}</h2>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 28 }}>
        {items.map((f,i)=>(
          <div key={i} style={{
            padding: 28, borderRadius: 10, border:'1px solid #E5E5E5', background:'#fff',
            display:'flex', flexDirection:'column', gap: 10,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 8, background:'#FFD500',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              marginBottom: 8,
            }}>
              <Icon name={f.icon} size={20} stroke={2} color="#0A0A0A"/>
            </div>
            <div style={{ font:'600 19px Roboto, sans-serif', color:'#0A0A0A' }}>{f.t}</div>
            <div style={{ font:'400 15px/1.6 Roboto, sans-serif', color:'#525252' }}>{f.b}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const SolTrust = ({ title, items }) => (
  <section style={{ padding:'96px 24px', background:'#0A0A0A', color:'#fff' }}>
    <div style={{ maxWidth: 1200, margin:'0 auto' }}>
      <h2 style={{ font:'700 40px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 56px', textWrap:'balance', maxWidth: 760 }}>{title}</h2>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 32 }}>
        {items.map((it,i)=>(
          <div key={i} style={{ display:'flex', flexDirection:'column', gap: 10 }}>
            <div style={{ width: 32, height: 4, background:'#FFD500', borderRadius: 2, marginBottom: 8 }}/>
            <div style={{ font:'600 18px Roboto, sans-serif', color:'#fff' }}>{it.t}</div>
            <div style={{ font:'400 15px/1.6 Roboto, sans-serif', color:'#A3A3A3' }}>{it.b}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const SolPricing = ({ title, plans, footnote }) => (
  <section style={{ padding:'96px 24px', background:'#FAFAFA' }}>
    <div style={{ maxWidth: 1000, margin:'0 auto' }}>
      <h2 style={{ font:'700 40px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 40px', textWrap:'balance' }}>{title}</h2>
      <div style={{ display:'grid', gridTemplateColumns:`repeat(${plans.length}, 1fr)`, gap: 20 }}>
        {plans.map((p,i)=>(
          <div key={i} style={{
            padding: 28, borderRadius: 12,
            background: p.highlight ? '#0A0A0A' : '#fff',
            color: p.highlight ? '#fff' : '#0A0A0A',
            border: p.highlight ? '1px solid #0A0A0A' : '1px solid #E5E5E5',
            display:'flex', flexDirection:'column', gap: 10,
          }}>
            <div style={{ font:'500 12px Roboto, sans-serif', letterSpacing:'0.08em', textTransform:'uppercase', color: p.highlight ? '#FFD500' : '#737373' }}>{p.tag}</div>
            <div style={{ font:'700 32px Roboto, sans-serif', letterSpacing:'-0.01em' }}>{p.price}</div>
            <div style={{ font:'400 14px/1.5 Roboto, sans-serif', color: p.highlight ? '#A3A3A3' : '#525252' }}>{p.desc}</div>
          </div>
        ))}
      </div>
      {footnote && (
        <div style={{ marginTop: 24, font:'400 13px/1.5 Roboto, sans-serif', color:'#737373' }}>{footnote}</div>
      )}
    </div>
  </section>
);

const SolCompare = ({ title, columns, rows }) => (
  <section style={{ padding:'96px 24px', background:'#fff' }}>
    <div style={{ maxWidth: 1000, margin:'0 auto' }}>
      <h2 style={{ font:'700 36px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 32px', textWrap:'balance' }}>{title}</h2>
      <div style={{ border:'1px solid #E5E5E5', borderRadius: 10, overflow:'hidden' }}>
        <div style={{ display:'grid', gridTemplateColumns:`1.4fr repeat(${columns.length}, 1fr)`, background:'#FAFAFA', borderBottom:'1px solid #E5E5E5' }}>
          <div style={{ padding:'14px 18px', font:'600 13px Roboto, sans-serif', color:'#737373', letterSpacing:'0.04em', textTransform:'uppercase' }}/>
          {columns.map((c,i)=>(
            <div key={i} style={{
              padding:'14px 18px', font:'600 14px Roboto, sans-serif',
              color: c.highlight ? '#0A0A0A' : '#525252',
              background: c.highlight ? '#FFF6BF' : 'transparent',
            }}>{c.label}</div>
          ))}
        </div>
        {rows.map((r,i)=>(
          <div key={i} style={{
            display:'grid', gridTemplateColumns:`1.4fr repeat(${columns.length}, 1fr)`,
            borderBottom: i === rows.length-1 ? 'none' : '1px solid #E5E5E5',
          }}>
            <div style={{ padding:'14px 18px', font:'500 14px Roboto, sans-serif', color:'#0A0A0A' }}>{r.label}</div>
            {r.values.map((v,j)=>(
              <div key={j} style={{
                padding:'14px 18px', font:'400 14px Roboto, sans-serif', color:'#525252',
                background: columns[j].highlight ? '#FFFCEB' : 'transparent',
              }}>{v}</div>
            ))}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const SolFaq = ({ items }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding:'96px 24px', background:'#fff', borderTop:'1px solid #E5E5E5' }}>
      <div style={{ maxWidth: 800, margin:'0 auto' }}>
        <h2 style={{ font:'700 36px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 32px' }}>Häufige Fragen</h2>
        <div style={{ display:'flex', flexDirection:'column', gap: 4 }}>
          {items.map((it,i)=>(
            <div key={i} style={{ borderTop:'1px solid #E5E5E5', padding:'18px 0' }}>
              <button onClick={()=>setOpen(open === i ? -1 : i)} style={{
                width:'100%', textAlign:'left', background:'none', border:'none', padding: 0,
                cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'space-between', gap: 16,
                font:'600 17px/1.4 Roboto, sans-serif', color:'#0A0A0A',
              }}>
                <span>{it.q}</span>
                <Icon name="chevronDown" size={16} stroke={2} color="#737373"
                      style={{ transform: open === i ? 'rotate(180deg)' : 'none', transition:'transform 200ms' }}/>
              </button>
              {open === i && (
                <div style={{ marginTop: 14, font:'400 16px/1.6 Roboto, sans-serif', color:'#525252' }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SolCTA = ({ title, body, ctaLabel, onCTA, steps }) => (
  <section style={{ padding:'96px 24px', background:'#FFD500' }}>
    <div style={{ maxWidth: 900, margin:'0 auto', textAlign:'center' }}>
      <h2 style={{ font:'700 44px/1.1 Roboto, sans-serif', letterSpacing:'-0.02em', margin:'0 0 16px', textWrap:'balance' }}>{title}</h2>
      {body && <p style={{ font:'400 18px/1.55 Roboto, sans-serif', color:'#0A0A0A', margin:'0 auto 32px', maxWidth: 600 }}>{body}</p>}
      {steps && (
        <div style={{ display:'grid', gridTemplateColumns:`repeat(${steps.length}, 1fr)`, gap: 16, margin:'0 auto 40px', maxWidth: 760, textAlign:'left' }}>
          {steps.map((s,i)=>(
            <div key={i} style={{ background:'#0A0A0A', color:'#fff', padding: 20, borderRadius: 10 }}>
              <div style={{ font:'700 24px Roboto, sans-serif', color:'#FFD500', marginBottom: 8 }}>{i+1}</div>
              <div style={{ font:'400 14px/1.5 Roboto, sans-serif' }}>{s}</div>
            </div>
          ))}
        </div>
      )}
      <button onClick={onCTA} style={{
        height: 56, padding:'0 28px', border:'none', borderRadius: 8,
        background:'#0A0A0A', color:'#fff',
        font:'600 16px Roboto, sans-serif', cursor:'pointer',
        display:'inline-flex', alignItems:'center', gap: 8,
      }}>
        {ctaLabel} <Icon name="arrowRight" size={16} stroke={2}/>
      </button>
    </div>
  </section>
);

window.SolHero = SolHero;
window.SolProblem = SolProblem;
window.SolFeatures = SolFeatures;
window.SolTrust = SolTrust;
window.SolPricing = SolPricing;
window.SolCompare = SolCompare;
window.SolFaq = SolFaq;
window.SolCTA = SolCTA;