// ContactPage - page Nous contacter Ktkarena
const ContC = ({ children, style }) =>
<div className="ktk-container" style={style}>{children}</div>;

const ContEyebrow = ({ children, dark }) =>
<span className="ktk-eyebrow" style={{ color: dark ? '#3a5a18' : 'var(--signature)', fontSize: "16px" }}>
    {children}
  </span>;


/* ============== S1 HERO (60vh, 50/50, photo bottom-right 80px) ============== */


const Stat = ({ label, value }) =>
<span style={{ display: 'inline-flex', gap: 8, alignItems: 'baseline' }}>
    <span style={{ color: 'var(--fg-on-dark-faint)' }}>{label}:</span>
    <span style={{ color: 'var(--signature)' }}>{value}</span>
  </span>;


const C_S1 = () =>
<section className="ctc-hero" style={{
  background: 'var(--charbon-profond)',
  padding: '140px 16px 50px',
  minHeight: '60vh',
  display: 'flex', alignItems: 'center',
  position: 'relative', overflow: 'hidden', height: '950px'
}}>
    <div className="ktk-container-hero">
      <div className="ktk-hero-split">
        <div className="hero-text">
          <ContEyebrow>CONTACT · WE READ EVERYTHING</ContEyebrow>
          <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(44px, 5.2vw, 80px)',
          fontWeight: 900, lineHeight: 0.96, letterSpacing: '-0.035em',
          margin: '20px 0 24px', color: 'var(--fg-on-dark)'
        }}>
            Write to us. We always{' '}
            <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--signature)' }}>
              reply.
            </span>
          </h1>
          <p style={{
          fontSize: 20, lineHeight: 1.5, color: 'var(--fg-on-dark-muted)',
          maxWidth: 560, margin: '0 0 28px'
        }}>
            No bots, no paid hotline, no menu with 12 sub-options. A real person reads every message and replies.
          </p>
          <div style={{
          display: 'flex', gap: 24, flexWrap: 'wrap',
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: 'var(--fg-on-dark-muted)', letterSpacing: '0.04em'
        }}>
            <Stat label="Average reply time" value="6 business hours" />
            <Stat label="Available in" value="FR + EN" />
          </div>
        </div>
        <div className="hero-visual">
          <HeroPhoto
          src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=1400&q=80&auto=format&fit=crop"
          alt="Young man writing a message on his laptop"
          objectPosition="center 35%"
          corner="bottom-right"
          tone="dark"
          minHeight={640}
          label="Young man · 26-32 · hands on keyboard · focused 3/4 view"
          sub="Douala café terrace · bright coworking space · cup of coffee · light friendly smile">
          </HeroPhoto>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        /* hauteur fluide : évite le clipping du contenu (overflow hidden + height fixe) */
        .ctc-hero { height: auto !important; padding: 120px 16px 64px !important; }
        .ctc-hero .hero-photo-wrap,
        .ctc-hero .hero-photo-frame { min-height: 480px !important; }
      }
      @media (max-width: 480px) {
        .ctc-hero { padding: 100px 12px 56px !important; }
        .ctc-hero h1 { font-size: clamp(36px, 11vw, 44px) !important; }
        .ctc-hero .hero-photo-wrap,
        .ctc-hero .hero-photo-frame { min-height: 380px !important; }
      }
    `}</style>
  </section>;


/* ============== S2 FORMULAIRE ============== */
const CATEGORIES = [
'General product question',
'Technical issue',
'Question about my account',
'Question about a payment',
'Press inquiry',
'Partnership inquiry',
'Legal / GDPR question',
'Other'];


const CONTACT_EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;

const C_S2 = () => {
  const [cat, setCat] = React.useState(CATEGORIES[0]);
  const [email, setEmail] = React.useState('');
  const [name, setName] = React.useState('');
  const [username, setUsername] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [emailError, setEmailError] = React.useState('');
  const [sent, setSent] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    const trimmed = email.trim();
    if (!trimmed) {
      setEmailError('Your email is required.');
      return;
    }
    if (!CONTACT_EMAIL_RE.test(trimmed)) {
      setEmailError('Enter a valid email address.');
      return;
    }
    setEmailError('');
    setSent(true);
  };

  return (
    <section className="ktk-block-bottom surface-light ctc-sec" style={{ padding: '120px 32px 160px' }}>
      <ContC>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(40px, 5vw, 72px)',
          fontWeight: 900, lineHeight: 0.98, letterSpacing: '-0.03em',
          margin: '20px 0 64px', maxWidth: 1100, color: 'var(--charbon-profond)'
        }}>
          What's{' '}
          <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic' }}>your question?</span>
        </h2>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr',
          gap: 40, alignItems: 'flex-start'
        }} className="form-grid">
          {/* Form card */}
          {sent ?
          <div className="ctc-form-card" role="status" aria-live="polite" style={{
            background: 'var(--charbon-doux)',
            color: 'var(--fg-on-dark)',
            borderRadius: 20,
            padding: '56px 32px',
            boxShadow: '0 12px 32px rgba(10,10,11,0.08)',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            textAlign: 'center', gap: 18
          }}>
            <span style={{
              width: 56, height: 56, borderRadius: 9999,
              background: 'var(--signature-soft)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--signature)', fontSize: 26, fontWeight: 700
            }}>✓</span>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26,
              letterSpacing: '-0.02em', color: 'var(--fg-on-dark)', margin: 0
            }}>Message sent. We'll get back to you soon.</h3>
            <p style={{
              fontSize: 16, lineHeight: 1.55, color: 'var(--fg-on-dark-muted)', margin: 0
            }}>We've read you. A reply will land at <strong style={{ color: 'var(--fg-on-dark)' }}>{email.trim()}</strong>.</p>
          </div>
          :
          <form className="ctc-form-card" onSubmit={handleSubmit} noValidate style={{
            background: 'var(--charbon-doux)',
            color: 'var(--fg-on-dark)',
            borderRadius: 20,
            padding: 32,
            boxShadow: '0 12px 32px rgba(10,10,11,0.08)'
          }}>
            <FormField id="ctc-cat" label="The subject of your message">
              <select id="ctc-cat" name="cat" className="ktk-select" value={cat} onChange={(e) => setCat(e.target.value)}>
                {CATEGORIES.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </FormField>

            <FormField id="ctc-email" label="Your email" error={emailError}>
              <input id="ctc-email" name="email" className="ktk-input" type="email" placeholder="your@email.com"
                value={email}
                onChange={(e) => { setEmail(e.target.value); if (emailError) setEmailError(''); }}
                aria-invalid={emailError ? 'true' : undefined}
                aria-describedby={emailError ? 'ctc-email-error' : undefined}
                style={emailError ? { borderColor: 'var(--error)' } : undefined} />
            </FormField>

            <FormField id="ctc-name" label="Your name (optional)">
              <input id="ctc-name" name="name" className="ktk-input" type="text" placeholder="What should we call you?"
                value={name} onChange={(e) => setName(e.target.value)} />
            </FormField>

            {cat === 'Question about my account' &&
            <FormField id="ctc-username" label="Your Ktkarena username">
                <input id="ctc-username" name="username" className="ktk-input" type="text" placeholder="@yourusername"
                  value={username} onChange={(e) => setUsername(e.target.value)} />
              </FormField>
            }

            <FormField id="ctc-message" label="Your message">
              <textarea id="ctc-message" name="message" className="ktk-textarea" rows={6}
              value={message} onChange={(e) => setMessage(e.target.value)}
              placeholder="Describe your issue, your question, or your suggestion. The more context you give, the better we can help." />
            </FormField>

            <FormField id="ctc-file" label="Attach a file (optional)">
              <label className="ktk-dropzone" htmlFor="ctc-file">
                <span style={{
                  width: 40, height: 40, borderRadius: 10,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  background: 'var(--signature-soft)', color: 'var(--signature)',
                  fontSize: 18, fontWeight: 600, flexShrink: 0
                }}>+</span>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-on-dark)' }}>
                    Drag a file here, or click to browse
                  </span>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11,
                    color: 'var(--fg-on-dark-faint)', letterSpacing: '0.04em'
                  }}>
                    Screenshot, document, video · Max 10 MB
                  </span>
                </div>
                <input id="ctc-file" name="file" type="file" style={{ display: 'none' }} />
              </label>
            </FormField>

            <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: 12 }}>
              Send message
            </button>

            <div style={{
              marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--fg-on-dark-faint)', lineHeight: 1.5
            }}>
              By sending this message, you agree to let us process your personal data in line with our <a href="/en/legal/confidentialite" style={{ color: 'var(--fg-on-dark-muted)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Privacy Policy</a>.
            </div>
          </form>}

          {/* Side info */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <SideBlock
              ic="◷"
              title="How long until I get a reply?"
              body={
              <ul style={{
                margin: 0, paddingLeft: 0, listStyle: 'none',
                display: 'flex', flexDirection: 'column', gap: 10
              }}>
                  {[
                ['Urgent question', 'within 4h on business days'],
                ['General question', 'within 24 business hours · 48h on weekends'],
                ['Press inquiry', 'within 24 business hours'],
                ['Legal question', 'within 7 business days']].
                map(([k, v]) =>
                <li key={k} className="ctc-sla-li" style={{
                  display: 'flex', justifyContent: 'space-between', gap: 16,
                  paddingTop: 10, borderTop: '1px solid rgba(10,10,11,0.10)'
                }}>
                      <span style={{ color: 'rgba(10,10,11,0.78)', fontSize: 14 }}>{k}</span>
                      <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 12,
                    color: 'var(--charbon-profond)', textAlign: 'right'
                  }}>{v}</span>
                    </li>
                )}
                </ul>
              } />
            
            <SideBlock
              ic="●"
              icColor="var(--signature)"
              icBg="var(--signature-soft)"
              icFg="var(--signature-on-light)"
              title="Is everything working right now?"
              body={
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: 'rgba(10,10,11,0.78)' }}>
                  Before reporting a bug, check the real-time status of our services. If the incident is already known, your question might be able to wait a few minutes.
                </p>
              }
              cta={{ href: '/en/statut', label: 'Check system status' }} />
            
            <SideBlock
              ic="¶"
              title="Your question may already be documented"
              body={
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: 'rgba(10,10,11,0.78)' }}>
                  Our Help Center gathers many articles covering most common questions. You might find your answer in 30 seconds.
                </p>
              }
              cta={{ href: '/en/centre-aide', label: "Browse the Help Center" }} />
            
          </div>
        </div>

        <style>{`
          @media (max-width: 960px) {
            .form-grid { grid-template-columns: 1fr !important; }
          }
          @media (max-width: 720px) {
            .form-grid { gap: 28px !important; }
            .ctc-form-card { padding: 24px 20px !important; }
          }
          @media (max-width: 480px) {
            .ctc-form-card { padding: 20px 16px !important; }
            .ctc-form-card .ktk-dropzone { padding: 16px; }
            .ctc-sla-li { flex-wrap: wrap; }
          }
        `}</style>
      </ContC>
    </section>);

};

const FormField = ({ id, label, children, error }) =>
<div style={{ marginBottom: 20 }}>
    <label className="ktk-label" htmlFor={id}>{label}</label>
    {children}
    {error &&
  <span id={id + '-error'} style={{
    display: 'block', marginTop: 8,
    fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.4,
    color: 'var(--error)'
  }}>{error}</span>
  }
  </div>;


const SideBlock = ({ ic, icBg, icFg, title, body, cta }) =>
<div style={{
  background: 'var(--creme-pur)',
  borderRadius: 16, padding: 24,
  boxShadow: '0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 16px rgba(10,10,11,0.04)'
}}>
    <div style={{
    width: 40, height: 40, borderRadius: 10,
    background: icBg || 'rgba(10,10,11,0.06)',
    color: icFg || 'var(--charbon-profond)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontSize: 20, fontWeight: 600, marginBottom: 14
  }}>{ic}</div>
    <h3 style={{
    fontFamily: 'var(--font-display)', fontWeight: 700,
    fontSize: 20, letterSpacing: '-0.01em',
    color: 'var(--charbon-profond)', margin: '0 0 12px', lineHeight: 1.25
  }}>{title}</h3>
    {body}
    {cta &&
  <a href={cta.href} className="ktk-link-arrow ktk-link-dark"
  style={{ marginTop: 14, display: 'inline-block', fontSize: 14 }}>
        {cta.label} →
      </a>
  }
  </div>;


/* ============== S3 CANAUX ALTERNATIFS ============== */
const EMAILS = [
{ ic: '✦', tag: 'USER SUPPORT', mail: 'support@ktkarena.com',
  p: "For technical questions, account issues, deposits/withdrawals, disputes.",
  sla: 'Reply within 6h on business days' },
{ ic: '◇', tag: 'PRESS', mail: 'presse@ktkarena.com',
  p: "For journalists, podcasters, content creators. Interview requests, fact-checking, asset requests.",
  sla: 'Reply within 24 business hours' },
{ ic: '§', tag: 'LEGAL & GDPR', mail: 'legal@ktkarena.com',
  p: "For legal questions, exercising your GDPR rights (export, deletion, portability), formal notices, disputes.",
  sla: 'Reply within 7 business days' },
{ ic: '◈', tag: 'PARTNERSHIPS', mail: 'partnerships@ktkarena.com',
  p: "For collaboration opportunities: technical integrations, commercial partnerships, event sponsorships.",
  sla: 'Reply within 5 business days' }];


const C_S3 = () =>
<section className="ctc-sec" style={{ background: 'var(--charbon-profond)', padding: '160px 32px' }}>
    <ContC>
      <ContEyebrow>OTHER CHANNELS</ContEyebrow>
      <h2 style={{
      fontFamily: 'var(--font-display)',
      fontSize: 'clamp(40px, 5vw, 72px)',
      fontWeight: 900, lineHeight: 0.98, letterSpacing: '-0.03em',
      margin: '20px 0 24px', maxWidth: 1100, color: 'var(--fg-on-dark)'
    }}>
        If you'd rather{' '}
        <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--signature)' }}>
          not fill out a form.
        </span>
      </h2>
      <p style={{
      fontSize: 19, lineHeight: 1.55, color: 'var(--fg-on-dark-muted)',
      maxWidth: '60ch', margin: '0 0 64px'
    }}>
        Four direct addresses depending on your profile. The right address lands with the right person - and shortens the reply time.
      </p>
      <div style={{
      display: 'grid', gap: 20,
      gridTemplateColumns: 'repeat(2, 1fr)'
    }} className="email-grid">
        {EMAILS.map((e, i) =>
      <a key={i} href={`mailto:${e.mail}`} className="email-card" style={{
        background: 'var(--charbon-doux)',
        border: '1px solid var(--hairline-on-dark)',
        borderRadius: 20,
        padding: 32,
        textDecoration: 'none', color: 'inherit',
        display: 'flex', flexDirection: 'column', gap: 16
      }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{
            width: 40, height: 40, borderRadius: 10,
            background: 'var(--signature-soft)', color: 'var(--signature)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 18, fontWeight: 600
          }}>{e.ic}</span>
              <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
            color: 'var(--fg-on-dark-faint)'
          }}>{e.tag}</span>
            </div>
            <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 'clamp(18px, 2.2vw, 26px)',
          color: 'var(--signature)', fontWeight: 500, letterSpacing: '-0.01em',
          wordBreak: 'break-all'
        }}>{e.mail}</div>
            <p style={{
          margin: 0, fontSize: 17, lineHeight: 1.55,
          color: 'var(--fg-on-dark-muted)'
        }}>{e.p}</p>
            <div style={{
          marginTop: 'auto', paddingTop: 14,
          borderTop: '1px solid var(--hairline-on-dark)',
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'var(--fg-on-dark-faint)', letterSpacing: '0.06em'
        }}>{e.sla}</div>
          </a>
      )}
      </div>
      <style>{`
        @media (max-width: 800px) {
          .email-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 480px) {
          .email-grid .email-card { padding: 22px 18px !important; }
        }
      `}</style>
    </ContC>
  </section>;


/* ============== S4 COMMUNAUTÉ ============== */
const C_S4 = () =>
<section className="ktk-block-bottom ktk-section-signature ctc-sec" style={{ padding: '150px 32px' }}>
    <ContC>
      <div className="c-s4-grid" style={{
        display: 'grid',
        gridTemplateColumns: '0.85fr 1.15fr',
        gap: 64,
        alignItems: 'center'
      }}>
        {/* LEFT - texte */}
        <div>
          <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(40px, 5vw, 72px)',
          fontWeight: 900, lineHeight: 0.96, letterSpacing: '-0.03em',
          margin: '20px 0 24px', color: 'var(--fg-on-dark)'
        }}>
            Want to chat with other{' '}
            <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--signature)' }}>
              beta testers?
            </span>
          </h2>
          <p style={{
          fontSize: 21, lineHeight: 1.55, color: 'rgba(244,239,230,0.82)',
          maxWidth: '52ch', margin: '0 0 36px'
        }}>
            Our Discord community is where beta testers share feedback, ask the team questions live, and meet each other.
          </p>
          <a href="#" className="btn btn-primary">
            Join the Discord
          </a>
          <div style={{
          marginTop: 18, fontFamily: 'var(--font-mono)',
          color: 'rgba(244,239,230,0.70)', letterSpacing: '0.04em', fontSize: "14px"
        }}>
            Moderated by the team · Community rules strictly enforced
          </div>
        </div>

        {/* RIGHT - photo communauté */}
        <div className="c-s4-photo" style={{
          position: 'relative',
          aspectRatio: '1 / 1',
          borderRadius: '80px 16px 16px 16px',
          overflow: 'hidden',
          background: '#1a1a1b',
          boxShadow: '0 24px 64px rgba(10,10,11,0.18)'
        }}>
          <img
            src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?w=1200&q=85&auto=format&fit=crop"
            alt="Community of young African adults gathered together, smiling, sharing"
            loading="lazy"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: 'center 30%',
              display: 'block'
            }} />
          {/* grain photographique */}
          <div aria-hidden="true" style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'radial-gradient(rgba(10,10,11,0.55) 0.6px, transparent 0.6px)',
            backgroundSize: '3px 3px',
            opacity: 0.09,
            mixBlendMode: 'multiply',
            pointerEvents: 'none'
          }} />
          {/* duotone vert subtil */}
          <div aria-hidden="true" style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(212,255,63,0.06) 0%, transparent 40%, rgba(10,10,11,0.18) 100%)',
            pointerEvents: 'none'
          }} />
          {/* label mono discret */}
          <div style={{
            position: 'absolute', bottom: 18, left: 22, right: 22,
            display: 'flex', alignItems: 'center', gap: 8,
            pointerEvents: 'none'
          }}>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'rgba(244,239,230,0.92)',
              textShadow: '0 1px 4px rgba(0,0,0,0.6)'
            }}>Discord community</span>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .c-s4-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          .c-s4-photo { max-width: 520px; aspect-ratio: 1 / 1; }
        }
        @media (max-width: 480px) {
          .c-s4-grid { gap: 40px !important; }
        }
      `}</style>
    </ContC>
  </section>;


/* ============== S5 ADRESSE PHYSIQUE ============== */
const DoualaMap = () =>
// Carte stylisée minimaliste - abstraction, pas de carte réelle
<div style={{
  position: 'relative',
  aspectRatio: '4 / 3',
  background: 'var(--charbon-doux)',
  border: '1px solid var(--hairline-on-dark)',
  borderRadius: 20, overflow: 'hidden'
}}>
    <svg viewBox="0 0 400 300" width="100%" height="100%" style={{ display: 'block' }}>
      {/* grid background */}
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(244,239,230,0.05)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="400" height="300" fill="url(#grid)" />

      {/* river / wouri estuary */}
      <path d="M 0 200 Q 80 180 140 195 T 280 175 Q 340 165 400 180 L 400 300 L 0 300 Z"
    fill="rgba(96,165,250,0.06)" stroke="rgba(96,165,250,0.25)" strokeWidth="1" />
      <text x="22" y="270" fontFamily="Geist Mono" fontSize="9"
    fill="rgba(244,239,230,0.32)" letterSpacing="0.1em">WOURI</text>

      {/* abstract road network */}
      <g stroke="rgba(244,239,230,0.18)" strokeWidth="1" fill="none">
        <path d="M 40 40 L 360 80" />
        <path d="M 60 130 L 380 110" />
        <path d="M 200 20 L 220 200" />
        <path d="M 100 60 L 130 200" />
        <path d="M 260 40 L 280 200" />
        <path d="M 320 60 L 340 200" />
        <path d="M 20 90 L 380 90" strokeDasharray="2 4" />
      </g>

      {/* district blobs */}
      <g fill="rgba(244,239,230,0.04)" stroke="rgba(244,239,230,0.10)">
        <rect x="160" y="80" width="100" height="80" rx="6" />
        <rect x="80" y="50" width="60" height="50" rx="6" />
        <rect x="280" y="60" width="70" height="60" rx="6" />
      </g>

      {/* labels */}
      <text x="170" y="100" fontFamily="Geist Mono" fontSize="9"
    fill="rgba(244,239,230,0.45)" letterSpacing="0.1em">AKWA</text>
      <text x="86" y="68" fontFamily="Geist Mono" fontSize="8"
    fill="rgba(244,239,230,0.30)" letterSpacing="0.1em">BONANJO</text>
      <text x="288" y="78" fontFamily="Geist Mono" fontSize="8"
    fill="rgba(244,239,230,0.30)" letterSpacing="0.1em">DEÏDO</text>

      {/* marker pulse */}
      <circle cx="208" cy="120" r="22" fill="rgba(212,255,63,0.10)">
        <animate attributeName="r" values="14;26;14" dur="2.4s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.18;0;0.18" dur="2.4s" repeatCount="indefinite" />
      </circle>
      <circle cx="208" cy="120" r="6" fill="#D4FF3F" stroke="#0A0A0B" strokeWidth="2" />

      {/* corner ticks */}
      <g stroke="rgba(244,239,230,0.30)" strokeWidth="1.2" fill="none">
        <path d="M 14 14 L 14 28 M 14 14 L 28 14" />
        <path d="M 386 14 L 386 28 M 386 14 L 372 14" />
        <path d="M 14 286 L 14 272 M 14 286 L 28 286" />
        <path d="M 386 286 L 386 272 M 386 286 L 372 286" />
      </g>

      {/* coords */}
      <text x="14" y="296" fontFamily="Geist Mono" fontSize="8"
    fill="rgba(244,239,230,0.30)" letterSpacing="0.1em">04°03'N · 09°42'E</text>
    </svg>
    <div style={{
    position: 'absolute', bottom: 16, right: 16,
    fontFamily: 'var(--font-mono)', fontSize: 11,
    color: 'var(--fg-on-dark-muted)', letterSpacing: '0.06em',
    background: 'rgba(10,10,11,0.7)', padding: '6px 10px',
    borderRadius: 6, border: '1px solid var(--hairline-on-dark)'
  }}>
      <span style={{ color: 'var(--signature)' }}>●</span> CITY CENTER · DOUALA 1<sup>ST</sup> · AKWA
    </div>
  </div>;


const C_S5 = () =>
<section className="ctc-sec" style={{ background: 'var(--charbon-profond)', padding: '120px 32px 160px' }}>
    <ContC>
      <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr',
      gap: 64, alignItems: 'center'
    }} className="addr-grid">
        <div>
          <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(40px, 5vw, 72px)',
          fontWeight: 900, lineHeight: 1.0, letterSpacing: '-0.03em',
          margin: '20px 0 28px', maxWidth: 600, color: 'var(--fg-on-dark)'
        }}>
            We also have{' '}
            <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--signature)' }}>
              a physical address.
            </span>
          </h2>
          <p style={{
          fontSize: 19, lineHeight: 1.55,
          color: 'var(--fg-on-dark-muted)', maxWidth: '52ch',
          margin: '0 0 32px'
        }}>
            For official mail, formal notices, registered letters with acknowledgment of receipt, or any other physical contact needs:
          </p>

          <div className="ctc-addr-card" style={{
          background: 'var(--charbon-doux)',
          border: '1px solid var(--hairline-on-dark)',
          borderRadius: 16,
          padding: '24px 28px',
          fontFamily: 'var(--font-mono)', fontSize: 14,
          lineHeight: 1.9, color: 'var(--fg-on-dark)',
          maxWidth: 460
        }}>
            <div style={{ fontWeight: 500 }}>Ktkarena SAS</div>
            <div>Boulevard de la Liberté</div>
            <div>Douala, Cameroon</div>
            <div>P.O. Box <span style={{
              color: 'var(--fg-on-dark-faint)',
              fontStyle: 'italic'
            }}>[to be completed]</span></div>
            <div style={{
            marginTop: 16, paddingTop: 16,
            borderTop: '1px solid var(--hairline-on-dark)',
            fontSize: 11, color: 'var(--fg-on-dark-faint)',
            letterSpacing: '0.04em', lineHeight: 1.6
          }}>
              Mail reception: Monday to Friday,<br />
              9 AM-5 PM Douala time (UTC+1)
            </div>
          </div>
        </div>

        <DoualaMap />
      </div>
      <style>{`
        @media (max-width: 880px) {
          .addr-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 480px) {
          .ctc-addr-card { padding: 20px 18px !important; }
        }
      `}</style>
    </ContC>
  </section>;


const ContactPage = () =>
<>
    <C_S1 />
    <C_S2 />
    <C_S3 />
    <C_S4 />
    <C_S5 />
    {/* Responsive partagé - paddings de sections et titres sur mobile */}
    <style>{`
      @media (max-width: 720px) {
        .ctc-sec { padding: 88px 24px !important; }
      }
      @media (max-width: 480px) {
        .ctc-sec { padding: 72px 20px !important; }
        .ctc-sec h2 { font-size: clamp(32px, 9.5vw, 40px) !important; }
      }
    `}</style>
  </>;


window.ContactPage = ContactPage;