// profile-design.jsx — Generator funcțional de poze de profil 4U Agency

const { useState: useStatePd, useRef: useRefPd, useEffect: useEffectPd, useCallback: useCallbackPd } = React;

const FRAMES = [
  { id: 'rama-1', name: 'Rama 1', src: 'uploads/rama-4u-1.png' },
  { id: 'rama-2', name: 'Rama 2', src: 'uploads/rama-4u-2.png' },
  { id: 'rama-3', name: 'Rama 3', src: 'uploads/rama-4u-3.png' },
  { id: 'rama-4', name: 'Rama 4', src: 'uploads/rama-4u-4.png' },
  { id: 'rama-5', name: 'Rama 5', src: 'uploads/rama-4u-5.png' },
];

const FILTERS = [
  { id: 'original', label: 'Original', css: 'none' },
  { id: 'bw',       label: 'B&W',      css: 'grayscale(100%)' },
  { id: 'warm',     label: 'Cald',     css: 'sepia(30%) saturate(120%) hue-rotate(-10deg)' },
  { id: 'cool',     label: 'Rece',     css: 'saturate(110%) hue-rotate(10deg) brightness(105%)' },
  { id: 'vivid',    label: 'Vivid',    css: 'saturate(150%) contrast(110%)' },
];

// ─── DRAW HELPERS ──────────────────────────────────────────────
function drawCheckeredBg(ctx, W, H) {
  const sz = Math.max(8, W / 32);
  for (let y = 0; y < H; y += sz) {
    for (let x = 0; x < W; x += sz) {
      ctx.fillStyle = ((x / sz + y / sz) % 2 === 0) ? '#1a1a1f' : '#141418';
      ctx.fillRect(x, y, sz, sz);
    }
  }
}

// ─── MAIN PAGE ─────────────────────────────────────────────────
function ProfileDesignPage({ onNav }) {
  return (
    <div className="page">
      <PdHero onNav={onNav} />
      <PdGenerator />
      <PdHowItWorks />
      <PdFAQShort />
    </div>
  );
}

// ─── HERO ──────────────────────────────────────────────────────
function PdHero({ onNav }) {
  return (
    <section className="pd-hero" style={{ minHeight: '40vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 40 }}>
      <Mesh /><Particles count={24} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="pill" style={{ marginBottom: 20 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>POZA DE PROFIL TIKTOK 4U</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(36px, 6vw, 72px)', margin: 0, maxWidth: 900, lineHeight: 1.05 }}>
            Poza ta TikTok, <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>în stil 4U.</span>
          </h1>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ fontSize: 'clamp(15px, 1.2vw, 18px)', color: 'var(--txt-2)', marginTop: 20, maxWidth: 640, lineHeight: 1.55 }}>
            Încarcă o poză, alege rama, descarcă în 30 de secunde.<br /><strong style={{ color: 'var(--txt-0)' }}>Gratis</strong> pentru toată lumea.
          </p>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ marginTop: 24 }}><BackButton onNav={onNav} /></div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── GENERATOR (canvas + controls) ─────────────────────────────
function PdGenerator() {
  const canvasRef = useRefPd(null);
  const containerRef = useRefPd(null);
  const previewCardRef = useRefPd(null);
  const [image, setImage] = useStatePd(null);
  const [imgPos, setImgPos] = useStatePd({ x: 0, y: 0 });
  const [zoom, setZoom] = useStatePd(100);
  const [rotation, setRotation] = useStatePd(0);
  const [selectedFrame, setSelectedFrame] = useStatePd('rama-1');
  const [frameImg, setFrameImg] = useStatePd(null);
  const [filter, setFilter] = useStatePd('original');
  const [drag, setDrag] = useStatePd(false);
  const [isStuck, setIsStuck] = useStatePd(false);
  const dragStart = useRefPd({ x: 0, y: 0, posX: 0, posY: 0 });
  const fileInputRef = useRefPd(null);
  const [canvasSize, setCanvasSize] = useStatePd(600);
  const [isDesktop, setIsDesktop] = useStatePd(() => typeof window !== 'undefined' && window.innerWidth >= 900);

  useEffectPd(() => {
    const onResize = () => setIsDesktop(window.innerWidth >= 900);
    onResize();
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  // Responsive canvas sizing — shrinks when sticky on mobile so whole circle stays visible
  useEffectPd(() => {
    function updateSize() {
      if (!previewCardRef.current) return;
      const isMobile = window.innerWidth < 600;
      const padding = isMobile ? 28 : 36;
      const inner = previewCardRef.current.clientWidth - padding;
      const cap = isMobile ? 260 : 320;
      setCanvasSize(Math.max(180, Math.min(cap, inner)));
    }
    updateSize();
    window.addEventListener('resize', updateSize);
    return () => window.removeEventListener('resize', updateSize);
  }, [isStuck]);

  // Detect "stuck" state via a sentinel element placed just before the sticky card.
  // Self-observing the sticky card is unreliable because its rect tracks the sticky
  // position, not the unstuck flow position.
  const sentinelRef = useRefPd(null);
  useEffectPd(() => {
    const sentinel = sentinelRef.current;
    if (!sentinel) return;
    const obs = new IntersectionObserver(
      ([entry]) => setIsStuck(!entry.isIntersecting),
      { rootMargin: '-73px 0px 0px 0px', threshold: [0] }
    );
    obs.observe(sentinel);
    return () => obs.disconnect();
  }, []);

  // Load frame PNG when selection changes
  useEffectPd(() => {
    const f = FRAMES.find(x => x.id === selectedFrame);
    if (!f) { setFrameImg(null); return; }
    const img = new Image();
    img.onload = () => setFrameImg(img);
    img.onerror = () => setFrameImg(null);
    img.src = f.src;
  }, [selectedFrame]);

  // Render canvas
  useEffectPd(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const dpr = window.devicePixelRatio || 1;
    canvas.width = canvasSize * dpr;
    canvas.height = canvasSize * dpr;
    const ctx = canvas.getContext('2d');
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    const W = canvasSize;
    const H = canvasSize;
    ctx.clearRect(0, 0, W, H);
    drawCheckeredBg(ctx, W, H);
    if (image) {
      const iw = image.naturalWidth || image.width;
      const ih = image.naturalHeight || image.height;
      if (iw > 0 && ih > 0) {
        ctx.save();
        ctx.beginPath();
        ctx.arc(W/2, H/2, W/2, 0, Math.PI * 2);
        ctx.clip();
        ctx.filter = FILTERS.find(f => f.id === filter)?.css || 'none';
        ctx.translate(W/2 + imgPos.x, H/2 + imgPos.y);
        ctx.rotate(rotation * Math.PI / 180);
        const scale = zoom / 100;
        const baseFit = Math.max(W / iw, H / ih);
        const w = iw * baseFit * scale;
        const h = ih * baseFit * scale;
        ctx.drawImage(image, -w/2, -h/2, w, h);
        ctx.restore();
        ctx.filter = 'none';
      }
    }
    if (frameImg) {
      ctx.drawImage(frameImg, 0, 0, W, H);
    }
  }, [image, imgPos, zoom, rotation, frameImg, filter, canvasSize]);

  // Upload
  const onFile = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 10 * 1024 * 1024) { alert('Imaginea e mai mare de 10MB.'); return; }
    const reader = new FileReader();
    reader.onload = (ev) => {
      const img = new Image();
      img.onload = () => {
        // Așteaptă ca imaginea să fie complet decodificată
        if (img.decode) {
          img.decode().then(() => {
            setImage(img);
            setImgPos({ x: 0, y: 0 });
            setZoom(100);
            setRotation(0);
          }).catch(() => {
            // Fallback dacă decode() nu e suportat
            setImage(img);
            setImgPos({ x: 0, y: 0 });
            setZoom(100);
            setRotation(0);
          });
        } else {
          setImage(img);
          setImgPos({ x: 0, y: 0 });
          setZoom(100);
          setRotation(0);
        }
      };
      img.src = ev.target.result;
    };
    reader.readAsDataURL(file);
  };

  // Drag
  const getPoint = (e) => {
    const rect = canvasRef.current.getBoundingClientRect();
    const t = e.touches?.[0] || e;
    return { x: t.clientX - rect.left, y: t.clientY - rect.top };
  };
  const onDown = (e) => {
    if (!image) return;
    e.preventDefault();
    const p = getPoint(e);
    dragStart.current = { x: p.x, y: p.y, posX: imgPos.x, posY: imgPos.y };
    setDrag(true);
  };
  const onMove = (e) => {
    if (!drag || !image) return;
    e.preventDefault();
    const p = getPoint(e);
    const scale = canvasSize / canvasRef.current.getBoundingClientRect().width;
    setImgPos({
      x: dragStart.current.posX + (p.x - dragStart.current.x) * scale,
      y: dragStart.current.posY + (p.y - dragStart.current.y) * scale,
    });
  };
  const onUp = () => setDrag(false);

  const handleReset = () => { setImgPos({ x: 0, y: 0 }); setZoom(100); setRotation(0); };
  const handleClear = () => {
    if (!confirm('Sigur vrei să ștergi poza?')) return;
    setImage(null); setImgPos({ x: 0, y: 0 }); setZoom(100); setRotation(0);
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const handleDownload = () => {
    if (!image) { alert('Încarcă o poză mai întâi.'); return; }
    const out = document.createElement('canvas');
    out.width = 1024; out.height = 1024;
    const ctx = out.getContext('2d');
    const W = 1024, H = 1024;
    const scaleFactor = W / canvasSize;
    const iw = image.naturalWidth || image.width;
    const ih = image.naturalHeight || image.height;
    ctx.save();
    ctx.beginPath();
    ctx.arc(W/2, H/2, W/2, 0, Math.PI * 2);
    ctx.clip();
    ctx.filter = FILTERS.find(f => f.id === filter)?.css || 'none';
    ctx.translate(W/2 + imgPos.x * scaleFactor, H/2 + imgPos.y * scaleFactor);
    ctx.rotate(rotation * Math.PI / 180);
    const scale = zoom / 100;
    const baseFit = Math.max(W / iw, H / ih);
    const w = iw * baseFit * scale;
    const h = ih * baseFit * scale;
    ctx.drawImage(image, -w/2, -h/2, w, h);
    ctx.restore();
    ctx.filter = 'none';
    if (frameImg) {
      ctx.drawImage(frameImg, 0, 0, W, H);
    }
    const link = document.createElement('a');
    link.download = `4u-profile-${Date.now()}.png`;
    link.href = out.toDataURL('image/png');
    link.click();
  };

  const sectionLabel = { fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.15em', marginBottom: 10 };
  const cardStyle = { padding: isDesktop ? 12 : 16 };

  const renderFrameBtn = (f) => {
    const active = selectedFrame === f.id;
    return (
      <button
        key={f.id}
        onClick={() => setSelectedFrame(f.id)}
        className="frame-btn"
        style={{
          padding: 6, borderRadius: 10,
          background: active ? 'rgba(82,242,15,.10)' : 'rgba(255,255,255,.02)',
          border: active ? '2px solid #52F20F' : '.5px solid var(--line)',
          boxShadow: active ? '0 0 16px rgba(82,242,15,.25)' : 'none',
          cursor: 'pointer', display: 'flex', flexDirection: 'column',
          alignItems: 'center', gap: 6, position: 'relative',
          transition: 'all .2s',
        }}
      >
        <div style={{ width: '100%', aspectRatio: '1', borderRadius: 8, overflow: 'hidden', background: 'rgba(0,0,0,.25)' }}>
          <img src={f.src} alt={f.name} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
        </div>
        <span className="mono" style={{ fontSize: 9, color: active ? 'var(--accent-1)' : 'var(--txt-2)', letterSpacing: '0.05em', whiteSpace: 'nowrap' }}>{f.name.toUpperCase()}</span>
      </button>
    );
  };

  const previewCard = (
    <div ref={previewCardRef} className={`card-glass pd-canvas-card${isStuck ? ' is-stuck' : ''}`} style={{ padding: isDesktop ? 10 : 14 }}>
      <div ref={containerRef} style={{ position: 'relative', width: '100%', maxWidth: canvasSize, aspectRatio: '1', margin: '0 auto' }}>
        <canvas
          ref={canvasRef}
          style={{ width: '100%', height: '100%', display: 'block', borderRadius: 12, cursor: image ? (drag ? 'grabbing' : 'grab') : 'default', touchAction: 'none' }}
          onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}
          onTouchStart={onDown} onTouchMove={onMove} onTouchEnd={onUp}
        />
        {!image && (
          <div style={{
            position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
            pointerEvents: 'none', color: 'var(--txt-1)', textAlign: 'center',
            fontSize: 'clamp(11px, 2.6vmin, 13px)', fontWeight: 500, lineHeight: 1.3,
            maxWidth: '70%', whiteSpace: 'nowrap'
          }}>
            Încarcă o poză ca să începi
          </div>
        )}
      </div>
    </div>
  );

  const ajusteazaCard = (
    <div className="card-glass pd-card" style={cardStyle}>
      <div className="mono" style={sectionLabel}>AJUSTEAZĂ</div>
      <PdSlider label="Zoom" value={zoom} min={50} max={200} step={1} unit="%" onChange={setZoom} />
      <PdSlider label="Rotire" value={rotation} min={0} max={360} step={1} unit="°" onChange={setRotation} />
      <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 4, fontStyle: 'italic' }}>
        Sau trage poza direct în canvas pentru poziționare.
      </div>
    </div>
  );

  const filtruCard = (
    <div className="card-glass pd-card" style={cardStyle}>
      <div className="mono" style={sectionLabel}>FILTRU</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {FILTERS.map(f => {
          const active = filter === f.id;
          return (
            <button
              key={f.id}
              onClick={() => setFilter(f.id)}
              style={{
                padding: '6px 12px', borderRadius: 999,
                background: active ? 'rgba(82,242,15,.12)' : 'rgba(255,255,255,.03)',
                border: active ? '1px solid var(--accent-1)' : '.5px solid var(--line)',
                color: active ? 'var(--accent-1)' : 'var(--txt-2)',
                fontSize: 12, cursor: 'pointer', transition: 'all .2s'
              }}
            >{f.label}</button>
          );
        })}
      </div>
    </div>
  );

  const actionsButtons = (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <button className="btn btn-primary" onClick={handleDownload} style={{ boxShadow: '0 0 24px rgba(82,242,15,.4)' }}>
        💾 Descarcă poza
      </button>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <button className="btn btn-glass" onClick={handleReset}>🔄 Reset poziție</button>
        <button className="btn btn-glass" onClick={handleClear} style={{ borderColor: 'rgba(239,68,68,.3)', color: '#EF4444' }}>🗑 Șterge poza</button>
      </div>
    </div>
  );

  return (
    <section className="pd-gen" style={{ padding: isDesktop ? '12px 0 40px' : '20px 0 80px', position: 'relative' }}>
      <div className="container" style={{ maxWidth: isDesktop ? 980 : 560 }}>
        <div className="pd-stack">

          {/* 1. POZA TA */}
          <div className="card-glass pd-card" style={cardStyle}>
            <div className="mono" style={sectionLabel}>POZA TA</div>
            <button className="btn btn-primary" style={{ width: '100%' }} onClick={() => fileInputRef.current?.click()}>
              📁 {image ? 'Schimbă poza' : 'Încarcă poza'}
            </button>
            <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', marginTop: 8, letterSpacing: '0.05em' }}>
              JPG, PNG, WEBP · MAX 10MB
            </div>
            <input ref={fileInputRef} type="file" accept="image/*" onChange={onFile} style={{ display: 'none' }} />
          </div>

          {/* sentinel — when scrolled past, .pd-canvas-card is "stuck" */}
          <div ref={sentinelRef} aria-hidden="true" style={{ height: 1, marginTop: -1 }} />

          {isDesktop ? (
            <div className="pd-layout">
              <div className="pd-zone-main">
                {previewCard}
                {ajusteazaCard}
                {filtruCard}
                {actionsButtons}
              </div>
              <div className="card-glass pd-card pd-zone-frames" style={cardStyle}>
                <div className="pd-frames-grid-all">
                  {FRAMES.map(renderFrameBtn)}
                </div>
              </div>
            </div>
          ) : (
            <>
              {previewCard}
              <div className="card-glass pd-card" style={cardStyle}>
                <div className="mono" style={sectionLabel}>ALEGE RAMA</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
                  {FRAMES.map(renderFrameBtn)}
                </div>
              </div>
              {ajusteazaCard}
              {filtruCard}
              {actionsButtons}
            </>
          )}

        </div>
      </div>
      <style>{`
        /* Block layout (not flex) on the stack so position: sticky inside
           is unambiguous about its containing block on every browser. */
        .pd-stack { display: block; }
        .pd-stack > * + * { margin-top: 12px; }
        @media (min-width: 900px) {
          .pd-stack > * + * { margin-top: 8px !important; }
        }

        @media (max-width: 900px) {
          /* pageIn animation leaves an identity-matrix transform on .page,
             which creates a containing block and prevents position: sticky
             from latching. Disable on this page on mobile. */
          .page { transform: none !important; animation: none !important; }

          .pd-gen { padding: 12px 0 60px !important; }
          .pd-stack > * + * { margin-top: 10px; }
          .pd-card { padding: 14px !important; }

          .pd-canvas-card {
            position: sticky !important;
            top: 72px !important;
            z-index: 5;
            padding: 12px !important;
            background: rgba(15,15,20,.94);
            transition: padding .2s ease;
          }
          .pd-canvas-card.is-stuck {
            padding: 8px !important;
            box-shadow: 0 8px 24px rgba(0,0,0,.45);
          }
        }
        @media (max-width: 600px) {
          .pd-hero { padding-top: 96px !important; padding-bottom: 12px !important; min-height: 0 !important; }
        }
      `}</style>
    </section>
  );
}

function PdSlider({ label, value, min, max, step, unit, onChange }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
        <span style={{ fontSize: 12, color: 'var(--txt-2)' }}>{label}</span>
        <span className="mono" style={{ fontSize: 12, color: 'var(--accent-1)' }}>{value}{unit}</span>
      </div>
      <input
        type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        style={{ width: '100%', accentColor: 'var(--accent-1)' }}
      />
    </div>
  );
}

// ─── HOW IT WORKS ──────────────────────────────────────────────
function PdHowItWorks() {
  const steps = [
    { ico: '📁', title: 'Încarcă poza', desc: 'Alege orice imagine de pe device. Recomandăm pătrat, minim 500x500px.' },
    { ico: '🎨', title: 'Personalizează', desc: 'Selectează rama, ajustează poziția, zoom-ul și filtrul. Vezi preview live.' },
    { ico: '💾', title: 'Descarcă', desc: 'Salvează poza ta nouă, format pătrat 1024x1024px. Gata pentru TikTok.' },
  ];
  return (
    <section style={{ padding: '80px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 48 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● CUM FUNCȚIONEAZĂ</div>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0 }}>3 pași simpli.</h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="pd-steps">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="card" style={{ padding: 28, height: '100%' }}>
                <div style={{ width: 56, height: 56, borderRadius: 14, background: 'linear-gradient(135deg, rgba(82,242,15,.18), rgba(255,215,0,.08))', border: '.5px solid rgba(82,242,15,.25)', display: 'grid', placeItems: 'center', fontSize: 28, marginBottom: 20 }}>{s.ico}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.1em', marginBottom: 6 }}>0{i + 1}</div>
                <h3 className="display" style={{ fontSize: 20, margin: '0 0 8px' }}>{s.title}</h3>
                <p style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .pd-steps { grid-template-columns: 1fr !important; }}`}</style>
    </section>
  );
}

// ─── FAQ ───────────────────────────────────────────────────────
function PdFAQShort() {
  const items = [
    { q: 'E gratuit?', a: 'Da, complet gratuit. Pentru oricine, cu sau fără cont 4U.' },
    { q: 'Pot folosi pe alte platforme?', a: 'Da, formatul pătrat funcționează pe TikTok, Instagram, YouTube, Facebook.' },
    { q: 'Pozele mele sunt salvate undeva?', a: 'Nu. Totul se procesează local pe device-ul tău. Nimic nu se trimite pe serverele noastre.' },
  ];
  const [open, setOpen] = useStatePd(0);
  return (
    <section style={{ padding: '80px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 32 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● FAQ RAPID</div>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0 }}>Întrebări frecvente.</h2>
          </div>
        </Reveal>
        <div style={{ maxWidth: 760 }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 80}>
              <div
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{ padding: '20px 24px', borderTop: i === 0 ? '.5px solid var(--line)' : 'none', borderBottom: '.5px solid var(--line)', cursor: 'pointer' }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                  <div style={{ fontSize: 16, fontWeight: 500 }}>{it.q}</div>
                  <span style={{ color: 'var(--accent-1)', fontSize: 18, transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .2s' }}>+</span>
                </div>
                {open === i && (
                  <p style={{ fontSize: 14, color: 'var(--txt-2)', lineHeight: 1.6, margin: '12px 0 0' }}>{it.a}</p>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ProfileDesignPage = ProfileDesignPage;