/* Hero, Product Lines, App Catalogue */

const ACCENT = {
  cyan:    { c: '#00E5FF', glow: 'var(--edge-cyan)',    gShadow: '0 0 24px rgba(0,229,255,0.35)' },
  violet:  { c: '#7B2CFF', glow: 'var(--edge-violet)',  gShadow: '0 0 24px rgba(123,44,255,0.35)' },
  magenta: { c: '#FF2BD1', glow: 'var(--edge-magenta)', gShadow: '0 0 24px rgba(255,43,209,0.35)' },
};

/* ===================== HERO ===================== */
const heroStyles = {
  wrap: {
    position: 'relative', overflow: 'hidden',
    minHeight: '92vh', display: 'flex', alignItems: 'center',
    padding: '96px 40px 64px',
  },
  inner: {
    position: 'relative', zIndex: 2,
    maxWidth: 1280, margin: '0 auto', width: '100%',
  },
  grid: {
    display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80, alignItems: 'center',
  },
  gridStack: {
    display: 'grid', gridTemplateColumns: '1fr', gap: 64, justifyItems: 'center', textAlign: 'center',
  },
  eyebrow: {
    fontFamily: 'var(--font-display)', fontSize: 11,
    letterSpacing: '0.28em', textTransform: 'uppercase',
    color: 'var(--gfc-cyan)', marginBottom: 28, display: 'inline-flex', alignItems: 'center', gap: 12,
    textShadow: 'var(--glow-xs-cyan)',
    padding: '8px 14px', border: '1px solid rgba(0,229,255,0.25)', borderRadius: 999,
    background: 'rgba(0,229,255,0.04)',
  },
  dot: { width: 6, height: 6, borderRadius: '50%', background: 'var(--gfc-cyan)', boxShadow: 'var(--glow-sm-cyan)' },
  h1: {
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(44px, 6.8vw, 96px)',
    letterSpacing: '0.06em', textTransform: 'uppercase',
    lineHeight: 0.98, margin: 0, color: '#fff',
  },
  h1a: { color: 'var(--gfc-cyan)', textShadow: '0 0 24px rgba(0,229,255,.45)' },
  h1b: { color: 'var(--gfc-magenta)', textShadow: '0 0 24px rgba(255,43,209,.45)' },
  h1gradient: {
    background: 'var(--grad-hero)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
  },
  sub: { marginTop: 28, maxWidth: 560, fontSize: 18, lineHeight: 1.6, color: 'var(--fg-2)' },
  ctas: { marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap' },
  imgWrap: { position: 'relative', aspectRatio: '1/1', width: '100%', maxWidth: 520, justifySelf: 'end' },
  img: {
    width: '100%', height: '100%', objectFit: 'contain', position: 'relative', zIndex: 1,
    filter: 'drop-shadow(0 0 60px rgba(123,44,255,0.5)) drop-shadow(0 0 30px rgba(255,43,209,0.3))',
    animation: 'gfc-float 6s ease-in-out infinite',
  },
  rings: {
    position: 'absolute', inset: '8%', borderRadius: '50%',
    border: '1px solid rgba(0,229,255,0.18)', animation: 'gfc-spin 40s linear infinite',
  },
  rings2: {
    position: 'absolute', inset: '20%', borderRadius: '50%',
    border: '1px dashed rgba(255,43,209,0.2)', animation: 'gfc-spin 55s linear infinite reverse',
  },
  stats: {
    marginTop: 56, display: 'flex', gap: 48, paddingTop: 28,
    borderTop: '1px solid var(--border)', flexWrap: 'wrap',
  },
  statVal: { fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, color: '#fff', letterSpacing: '0.06em' },
  statLab: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)', marginTop: 4, letterSpacing: '0.12em', textTransform: 'uppercase' },

  /* centered variant */
  centerHead: { textAlign: 'center', maxWidth: 980, margin: '0 auto' },
  cubeInline: { width: 220, height: 220, margin: '0 auto 32px' },
};

const GFCHero = ({ t, layout = 'split', taglineKey = 'a', onCta }) => {
  const tg = t.hero['tagline_' + taglineKey] || t.hero.tagline_a;
  const gradient = taglineKey === 'c';

  const headline = (
    <>
      <h1 style={heroStyles.h1}>
        <span style={gradient ? heroStyles.h1gradient : heroStyles.h1a}>{tg.a}</span><br/>
        <span style={gradient ? heroStyles.h1gradient : heroStyles.h1b}>{tg.b}</span>
      </h1>
      <p style={heroStyles.sub}>{t.hero.sub}</p>
      <div style={heroStyles.ctas}>
        <GFCButton variant="gradient" onClick={() => onCta('products')}>{t.hero.ctaPrimary.toUpperCase()}</GFCButton>
        <GFCButton variant="ghost" onClick={() => onCta('apps')}>{t.hero.ctaGhost.toUpperCase()}</GFCButton>
      </div>
    </>
  );

  const cube = (
    <div style={heroStyles.imgWrap}>
      <div style={heroStyles.rings}/>
      <div style={heroStyles.rings2}/>
      <img src="assets/logo-cube.png" alt="GFC cube" style={heroStyles.img}/>
    </div>
  );

  const statsBlock = (
    <div style={heroStyles.stats}>
      {t.hero.stats.map((s, i) => (
        <div key={i}>
          <div style={heroStyles.statVal}>{s.val}</div>
          <div style={heroStyles.statLab}>{s.lab}</div>
        </div>
      ))}
    </div>
  );

  return (
    <section style={heroStyles.wrap} id="sec-studio">
      <div style={heroStyles.inner}>
        {layout === 'split' && (
          <div style={heroStyles.grid}>
            <div>
              <div style={heroStyles.eyebrow}><span style={heroStyles.dot}></span>{t.hero.eyebrow}</div>
              {headline}
              {statsBlock}
            </div>
            {cube}
          </div>
        )}
        {layout === 'centered' && (
          <div style={heroStyles.centerHead}>
            <div style={heroStyles.cubeInline}>
              <img src="assets/logo-cube.png" alt="" style={{ ...heroStyles.img, animation: 'gfc-float 7s ease-in-out infinite' }}/>
            </div>
            <div style={heroStyles.eyebrow}><span style={heroStyles.dot}></span>{t.hero.eyebrow}</div>
            {headline}
            <div style={{ display: 'flex', justifyContent: 'center' }}>{statsBlock}</div>
          </div>
        )}
        {layout === 'editorial' && (
          <div>
            <div style={heroStyles.eyebrow}><span style={heroStyles.dot}></span>{t.hero.eyebrow}</div>
            <h1 style={{ ...heroStyles.h1, fontSize: 'clamp(52px, 9vw, 140px)', letterSpacing: '0.04em' }}>
              <span style={gradient ? heroStyles.h1gradient : heroStyles.h1a}>{tg.a}</span><br/>
              <span style={gradient ? heroStyles.h1gradient : heroStyles.h1b}>{tg.b}</span>
            </h1>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginTop: 48, alignItems: 'end' }}>
              <div>
                <p style={{ ...heroStyles.sub, marginTop: 0 }}>{t.hero.sub}</p>
                <div style={heroStyles.ctas}>
                  <GFCButton variant="gradient" onClick={() => onCta('products')}>{t.hero.ctaPrimary.toUpperCase()}</GFCButton>
                  <GFCButton variant="ghost" onClick={() => onCta('apps')}>{t.hero.ctaGhost.toUpperCase()}</GFCButton>
                </div>
              </div>
              <div style={{ ...heroStyles.imgWrap, maxWidth: 360, justifySelf: 'end', margin: 0 }}>
                <div style={heroStyles.rings}/>
                <div style={heroStyles.rings2}/>
                <img src="assets/logo-cube.png" alt="GFC cube" style={heroStyles.img}/>
              </div>
            </div>
            {statsBlock}
          </div>
        )}
      </div>
    </section>
  );
};

/* ===================== PRODUCT LINES ===================== */
const brandStyles = {
  wrap: { position: 'relative', padding: '120px 40px', background: '#0B0B0F' },
  inner: { maxWidth: 1280, margin: '0 auto' },
  head: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', marginBottom: 64 },
  eye: { fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--gfc-cyan)', marginBottom: 16, textShadow: 'var(--glow-xs-cyan)' },
  h2: { fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '0.05em', textTransform: 'uppercase', color: '#fff', margin: 0, lineHeight: 1.05 },
  sub: { color: 'var(--fg-3)', fontSize: 16, lineHeight: 1.7, maxWidth: 520, justifySelf: 'end' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  gridList: { display: 'grid', gridTemplateColumns: '1fr', gap: 16 },
};

const cardStyles = {
  card: {
    position: 'relative', padding: '40px 36px', borderRadius: 16, background: 'var(--gfc-ink)',
    border: '1px solid var(--border)', transition: 'all 260ms var(--ease-out)',
    overflow: 'hidden', display: 'flex', flexDirection: 'column', minHeight: 440,
  },
  topBar: { position: 'absolute', inset: '0 0 auto 0', height: 2 },
  glyph: {
    width: 48, height: 48, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '0.12em',
    marginBottom: 32,
  },
  tag: { fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--fg-4)', marginBottom: 12 },
  name: { fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#fff', marginBottom: 12, wordBreak: 'break-word' },
  pitch: { fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 500, color: '#fff', lineHeight: 1.35, marginBottom: 16 },
  body: { color: 'var(--fg-3)', fontSize: 14, lineHeight: 1.65, marginBottom: 24 },
  bullets: { display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 32, marginTop: 'auto' },
  bullet: {
    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em',
    padding: '6px 10px', borderRadius: 999,
    border: '1px solid rgba(255,255,255,0.08)', color: 'var(--fg-2)',
    background: 'rgba(255,255,255,0.02)',
  },
  cta: {
    fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
    display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer',
  },
};

const BRAND_HREF = {
  snelweb: { href: 'https://snelwebsite.be', external: true },
  apps:    { href: '#sec-apps',              external: false },
  skills:  { href: '#sec-apps',              external: false },
};

const BrandCard = ({ item }) => {
  const [hover, setHover] = React.useState(false);
  const a = ACCENT[item.accent] || ACCENT.cyan;
  const link = BRAND_HREF[item.id] || { href: '#', external: false };
  return (
    <a
      href={link.href}
      target={link.external ? '_blank' : undefined}
      rel={link.external ? 'noopener noreferrer' : undefined}
      style={{
        ...cardStyles.card,
        textDecoration: 'none', color: 'inherit',
        ...(hover ? { transform: 'translateY(-4px)', borderColor: a.c + '66', boxShadow: a.glow } : {}),
      }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div style={{ ...cardStyles.topBar, background: `linear-gradient(90deg, transparent, ${a.c}, transparent)`, opacity: hover ? 1 : 0.6 }}/>
      <div style={{ ...cardStyles.glyph, background: a.c + '1A', color: a.c, boxShadow: a.gShadow }}>0{item.accent === 'cyan' ? '1' : item.accent === 'magenta' ? '2' : '3'}</div>
      <div style={cardStyles.tag}>{item.tag}</div>
      <div style={cardStyles.name}>{item.name}</div>
      <div style={cardStyles.pitch}>{item.pitch}</div>
      <div style={cardStyles.body}>{item.body}</div>
      <div style={cardStyles.bullets}>
        {item.bullets.map((b, i) => <span key={i} style={cardStyles.bullet}>{b}</span>)}
      </div>
      <div style={{ ...cardStyles.cta, color: a.c, textShadow: `0 0 8px ${a.c}66` }}>
        {item.cta} <span>→</span>
      </div>
    </a>
  );
};

const GFCProductLines = ({ t }) => (
  <section style={brandStyles.wrap} id="sec-products">
    <div style={brandStyles.inner}>
      <div style={brandStyles.head}>
        <div>
          <div style={brandStyles.eye}>{t.brands.eyebrow}</div>
          <h2 style={brandStyles.h2}>{t.brands.title}</h2>
        </div>
        <p style={brandStyles.sub}>{t.brands.sub}</p>
      </div>
      <div style={brandStyles.grid}>
        {t.brands.items.map(item => <BrandCard key={item.id} item={item}/>)}
      </div>
    </div>
  </section>
);

/* ===================== APP CATALOGUE ===================== */
const appStyles = {
  wrap: {
    position: 'relative', padding: '120px 40px',
    background: 'radial-gradient(ellipse at 50% 0%, rgba(123,44,255,0.18), transparent 60%), #0B0B0F',
    borderTop: '1px solid var(--border)',
  },
  inner: { maxWidth: 1280, margin: '0 auto' },
  head: { display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 32, marginBottom: 56, flexWrap: 'wrap' },
  eye: { fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--gfc-magenta)', marginBottom: 16, textShadow: '0 0 8px rgba(255,43,209,0.4)' },
  h2: { fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '0.05em', textTransform: 'uppercase', color: '#fff', margin: 0, lineHeight: 1.05, maxWidth: 720 },
  sub: { color: 'var(--fg-3)', fontSize: 15, lineHeight: 1.65, maxWidth: 400, marginTop: 0 },

  row: {
    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
  },
  app: {
    position: 'relative', padding: 24, borderRadius: 20, background: 'rgba(26,26,34,0.6)',
    border: '1px solid var(--border)', backdropFilter: 'blur(12px)',
    transition: 'all 240ms var(--ease-out)', cursor: 'pointer',
  },
  appIcon: {
    width: '100%', aspectRatio: '1/1', borderRadius: 20, marginBottom: 20,
    border: '1px solid rgba(255,255,255,0.08)',
    position: 'relative', overflow: 'hidden',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  soonChip: {
    position: 'absolute', top: 12, right: 12,
    fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase',
    padding: '4px 8px', borderRadius: 999, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)',
    color: 'var(--gfc-amber)', border: '1px solid rgba(255,184,0,0.3)',
  },
  appIconGlyph: {
    fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 800, letterSpacing: '0.04em',
    color: '#fff', opacity: 0.9, textShadow: '0 0 20px rgba(255,255,255,0.25)',
  },
  appKind: { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-4)', marginBottom: 6 },
  appName: { fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, color: '#fff', marginBottom: 4 },
  appPrice: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.08em' },

  teaseWrap: {
    marginTop: 56, padding: '28px 32px', borderRadius: 16,
    background: 'linear-gradient(135deg, rgba(0,229,255,0.06), rgba(123,44,255,0.06), rgba(255,43,209,0.06))',
    border: '1px solid rgba(123,44,255,0.25)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
  },
  teaseText: { fontFamily: 'var(--font-sans)', fontSize: 16, color: 'var(--fg-1)', maxWidth: 520, lineHeight: 1.5 },
  form: { display: 'flex', gap: 8, flex: 1, minWidth: 320, maxWidth: 480 },
  input: {
    flex: 1, padding: '14px 16px', borderRadius: 8,
    background: 'rgba(0,0,0,0.4)', border: '1px solid rgba(255,255,255,0.1)',
    color: '#fff', fontFamily: 'var(--font-sans)', fontSize: 14, outline: 'none',
    transition: 'all 200ms var(--ease-out)',
  },
};

const APP_GRADIENTS = [
  'linear-gradient(135deg, #00E5FF 0%, #7B2CFF 100%)',
  'linear-gradient(135deg, #7B2CFF 0%, #FF2BD1 100%)',
  'linear-gradient(135deg, #FF2BD1 0%, #FFB800 100%)',
  'linear-gradient(135deg, #00E5FF 0%, #FFB800 100%)',
];

const AppCard = ({ app, i, soonLabel }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      style={{ ...appStyles.app, ...(hover ? { transform: 'translateY(-4px)', borderColor: 'rgba(0,229,255,0.35)', boxShadow: 'var(--edge-cyan)' } : {}) }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div style={{ ...appStyles.appIcon, background: APP_GRADIENTS[i % APP_GRADIENTS.length] }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 70% 20%, rgba(255,255,255,0.3), transparent 50%)' }}/>
        <div style={appStyles.appIconGlyph}>0{i+1}</div>
        <div style={appStyles.soonChip}>{soonLabel}</div>
      </div>
      <div style={appStyles.appKind}>{app.kind}</div>
      <div style={appStyles.appName}>{app.name}</div>
      <div style={appStyles.appPrice}>{app.price}</div>
    </div>
  );
};

const GFCAppCatalogue = ({ t }) => {
  const [email, setEmail] = React.useState('');
  const [focused, setFocused] = React.useState(false);
  return (
    <section style={appStyles.wrap} id="sec-apps">
      <div style={appStyles.inner}>
        <div style={appStyles.head}>
          <div>
            <div style={appStyles.eye}>{t.apps.eyebrow}</div>
            <h2 style={appStyles.h2}>{t.apps.title}</h2>
          </div>
          <p style={appStyles.sub}>{t.apps.sub}</p>
        </div>
        <div style={appStyles.row}>
          {t.apps.placeholders.map((a, i) => <AppCard key={i} app={a} i={i} soonLabel={t.apps.soon}/>)}
        </div>
        <div style={appStyles.teaseWrap} id="sec-contact">
          <div style={appStyles.teaseText}>{t.apps.tease}</div>
          <form style={appStyles.form} onSubmit={e => { e.preventDefault(); setEmail(''); alert('Thanks — we will notify you.'); }}>
            <input
              type="email" required placeholder={t.apps.signupPh}
              value={email} onChange={e => setEmail(e.target.value)}
              onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
              style={{ ...appStyles.input, ...(focused ? { borderColor: 'var(--gfc-cyan)', boxShadow: 'var(--glow-sm-cyan)' } : {}) }}
            />
            <GFCButton variant="primary">{t.apps.signupCta.toUpperCase()}</GFCButton>
          </form>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { GFCHero, GFCProductLines, GFCAppCatalogue });