/* === BasecampVisuals: SVG illustration components === */
/* Editorial-style imagery built with SVG. Each visual evokes a real photograph
   without hand-drawing figures — uses depth, gradient atmosphere, and the
   Belavista boia grafismo as connective visual language. */

const BV_COLORS = {
  purple: '#511865',
  purpleDeep: '#3a0f4a',
  purpleSoft: '#6b2483',
  blue: '#0076D6',
  blueDeep: '#005ba8',
  cream: '#f5f3ef',
  white: '#ffffff',
  ink: '#1c1320',
  gray: '#B8BABC',
};

/* The boia grafismo — the brand's signature visual mark.
   A rectangle and a quarter-circle connected by a small disc that "cuts" both. */
function Boia({ size = 64, color = 'currentColor', strokeWidth = 2, filled = false, rotate = 0 }) {
  const r = 40;
  const small = 6;
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} style={{ transform: `rotate(${rotate}deg)` }}>
      <g fill={filled ? color : 'none'} stroke={color} strokeWidth={strokeWidth}>
        {/* Rectangle */}
        <rect x="6" y="50" width="44" height="44" rx="0" />
        {/* Quarter circle (top-right) */}
        <path d={`M 50 50 L 94 50 A ${r + 4} ${r + 4} 0 0 0 50 6 Z`} transform="translate(0, 0)" />
      </g>
      {/* Connecting disc */}
      <circle cx="50" cy="50" r={small} fill={BV_COLORS.cream} stroke={color} strokeWidth={strokeWidth} />
    </svg>
  );
}

/* Hero composition: real photo of high-school students with brand overlay + boia */
// Students struggling/overwhelmed with studies — tired, head in hands, books piled
const HERO_PHOTO = "https://images.unsplash.com/photo-1606326608606-aa0b62935f2b?auto=format&fit=crop&w=900&q=80";

function HeroVisual() {
  return (
    <div className="hero-visual" aria-hidden="true">
      <div className="hero-photo">
        <img src={HERO_PHOTO} alt="" loading="eager" />
        <div className="hero-photo-tint" />
        <svg viewBox="0 0 100 100" className="hero-boia" preserveAspectRatio="none">
          <g fill="none" stroke="#ffd9ef" strokeWidth="1.4" opacity="0.95">
            <rect x="6" y="50" width="44" height="44" />
            <path d="M 50 50 L 94 50 A 44 44 0 0 0 50 6 Z" />
          </g>
          <circle cx="50" cy="50" r="6" fill="#3a0f4a" stroke="#ffd9ef" strokeWidth="1.4" />
        </svg>
      </div>

      {/* Floating annotation card */}
      <div className="hero-card hero-card-1">
        <div className="hcc-eyebrow">Pilar 02</div>
        <div className="hcc-title">Aprendizado Ativo</div>
        <div className="hcc-meter"><span style={{ width: '78%' }} /></div>
        <div className="hcc-meta">
          <span>Em desenvolvimento</span>
          <span className="hcc-num">+34</span>
        </div>
      </div>
      <div className="hero-card hero-card-2">
        <div className="hcc-tiny">RAIO-X DE ESTUDOS</div>
        <div className="hcc-stack">
          <Bar label="Energia" pct={62} tone="purple" />
          <Bar label="Aprendizado Ativo" pct={78} tone="blue" />
          <Bar label="Rotina" pct={45} tone="purple" />
          <Bar label="Propósito" pct={88} tone="blue" />
          <Bar label="Autopercepção" pct={70} tone="purple" />
        </div>
      </div>
    </div>
  );
}

function Bar({ label, pct, tone }) {
  return (
    <div className="bar">
      <div className="bar-label">{label}</div>
      <div className="bar-track">
        <span className={`bar-fill bar-${tone}`} style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}

/* Editorial portrait — real photo of a high-school student with brand overlay */
// Lucas — high-school student (16y) frustrated with studies, head down at desk
const PORTRAIT_PHOTO = "https://images.unsplash.com/photo-1610484826967-09c5720778c7?auto=format&fit=crop&w=720&q=80";

function StudentPortrait({ tone = 'purple' }) {
  return (
    <div className={`portrait-photo portrait-${tone}`}>
      <img src={PORTRAIT_PHOTO} alt="" loading="lazy" />
      <div className="portrait-tint" />
      <svg viewBox="0 0 100 100" className="portrait-boia" preserveAspectRatio="none">
        <g fill="none" stroke="#ffffff" strokeWidth="1.6" opacity="0.95">
          <rect x="6" y="50" width="44" height="44" />
          <path d="M 50 50 L 94 50 A 44 44 0 0 0 50 6 Z" />
        </g>
        <circle cx="50" cy="50" r="6" fill="transparent" stroke="#ffffff" strokeWidth="1.6" />
      </svg>
    </div>
  );
}

/* Pillar visual — abstract editorial card per pillar */
function PillarVisual({ pillar }) {
  const visuals = {
    energy: (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="pv1" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#3a0f4a" /><stop offset="100%" stopColor="#0076D6" />
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill="url(#pv1)" />
        {/* Moon arc */}
        <circle cx="320" cy="80" r="50" fill="#f5f3ef" opacity="0.95" />
        <circle cx="305" cy="70" r="50" fill="url(#pv1)" />
        {/* Stars */}
        {[[60,50],[140,80],[90,140],[200,40],[260,180],[180,220]].map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="1.5" fill="#fff" opacity="0.8" />
        ))}
        <path d="M 0 240 Q 200 200 400 250 L 400 300 L 0 300 Z" fill="#15071c" opacity="0.6" />
      </svg>
    ),
    active: (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="pv2" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#511865" /><stop offset="100%" stopColor="#3a0f4a" />
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill="url(#pv2)" />
        {/* Open book */}
        <g transform="translate(120,90)">
          <polygon points="0,40 80,20 80,140 0,160" fill="#f5f3ef" />
          <polygon points="80,20 160,40 160,160 80,140" fill="#e8e3df" />
          <line x1="80" y1="20" x2="80" y2="140" stroke="#999" strokeWidth="1" />
          {[30,50,70,90,110].map((y,i)=>(
            <g key={i}>
              <line x1="10" y1={y+25} x2="65" y2={y+22} stroke="#999" strokeWidth="1" />
              <line x1="90" y1={y+24} x2="150" y2={y+27} stroke="#999" strokeWidth="1" />
            </g>
          ))}
        </g>
        {/* Spark */}
        <g transform="translate(310,60)">
          <circle r="20" fill="#0076D6" />
          <text textAnchor="middle" y="6" fill="#fff" fontSize="22" fontWeight="700">!</text>
        </g>
      </svg>
    ),
    routine: (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="pv3" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#0076D6" /><stop offset="100%" stopColor="#005ba8" />
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill="url(#pv3)" />
        {/* Calendar grid */}
        <g transform="translate(80,60)" stroke="#fff" strokeWidth="1.5" fill="none">
          <rect x="0" y="0" width="240" height="180" fill="#fff" fillOpacity="0.08" />
          {[1,2,3,4].map(i=><line key={i} x1={i*48} y1="0" x2={i*48} y2="180" />)}
          {[1,2].map(i=><line key={i} x1="0" y1={i*60} x2="240" y2={i*60} />)}
          {/* Active days */}
          <rect x="48" y="0" width="48" height="60" fill="#511865" fillOpacity="0.85" stroke="none" />
          <rect x="144" y="60" width="48" height="60" fill="#511865" fillOpacity="0.85" stroke="none" />
          <rect x="0" y="120" width="48" height="60" fill="#511865" fillOpacity="0.85" stroke="none" />
          <rect x="192" y="120" width="48" height="60" fill="#511865" fillOpacity="0.85" stroke="none" />
        </g>
      </svg>
    ),
    purpose: (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <defs>
          <radialGradient id="pv4" cx="0.5" cy="0.5" r="0.7">
            <stop offset="0%" stopColor="#6b2483" /><stop offset="100%" stopColor="#3a0f4a" />
          </radialGradient>
        </defs>
        <rect width="400" height="300" fill="url(#pv4)" />
        {/* Target */}
        <g transform="translate(200,150)" stroke="#f5f3ef" strokeWidth="2" fill="none">
          {[110,80,50,25].map((r,i)=><circle key={i} r={r} strokeOpacity={0.4 + i*0.15} />)}
          <circle r="8" fill="#0076D6" stroke="none" />
          <line x1="-10" y1="-30" x2="0" y2="0" stroke="#fff" strokeWidth="3" />
          <polygon points="-15,-35 -5,-25 -10,-30" fill="#fff" />
        </g>
      </svg>
    ),
    awareness: (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="pv5" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#3a0f4a" /><stop offset="100%" stopColor="#511865" />
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill="url(#pv5)" />
        {/* Mirror reflection */}
        <g transform="translate(200,150)">
          <ellipse cx="-50" cy="0" rx="70" ry="100" fill="#f5f3ef" opacity="0.15" />
          <ellipse cx="50" cy="0" rx="70" ry="100" fill="#f5f3ef" opacity="0.25" />
          <line x1="0" y1="-100" x2="0" y2="100" stroke="#fff" strokeWidth="1" strokeDasharray="4 6" opacity="0.7" />
        </g>
        {/* Eye */}
        <g transform="translate(200,150)" fill="none" stroke="#fff" strokeWidth="2">
          <ellipse rx="40" ry="22" />
          <circle r="9" fill="#0076D6" stroke="none" />
          <circle r="3" fill="#fff" stroke="none" />
        </g>
      </svg>
    ),
  };
  return <div className="pillar-visual">{visuals[pillar]}</div>;
}

/* Plataform mock — visual of the result screen */
function PlatformMock() {
  return (
    <div className="platform-mock" aria-hidden="true">
      <div className="pm-window">
        <div className="pm-bar">
          <span /><span /><span />
          <div className="pm-url">basecamp.faculdadebelavista.edu.br</div>
        </div>
        <div className="pm-content">
          <div className="pm-header">
            <div>
              <div className="pm-eyebrow">SEU RAIO-X · 1º ANO EM</div>
              <div className="pm-title">Olá, você é um <em>Estrategista</em></div>
            </div>
            <div className="pm-score">
              <svg viewBox="0 0 100 100" width="84" height="84">
                <circle cx="50" cy="50" r="42" fill="none" stroke="#eee" strokeWidth="8" />
                <circle cx="50" cy="50" r="42" fill="none" stroke="#511865" strokeWidth="8"
                  strokeDasharray="264" strokeDashoffset="80" strokeLinecap="round"
                  transform="rotate(-90 50 50)" />
                <text x="50" y="56" textAnchor="middle" fontSize="22" fontWeight="700" fill="#511865">68</text>
              </svg>
            </div>
          </div>
          <div className="pm-grid">
            <PMPill label="Energia" pct={62} zone="Em desenvolvimento" tone="purple" />
            <PMPill label="Aprendizado Ativo" pct={78} zone="Consolidado" tone="blue" />
            <PMPill label="Rotina" pct={45} zone="Atenção" tone="purple" />
            <PMPill label="Propósito" pct={88} zone="Referência" tone="blue" />
            <PMPill label="Autopercepção" pct={70} zone="Consolidado" tone="purple" />
          </div>
          <div className="pm-action">
            <div>
              <div className="pm-action-title">Próximo passo: <strong>Pilar Rotina</strong></div>
              <div className="pm-action-sub">3 micro-hábitos sugeridos para esta semana</div>
            </div>
            <div className="pm-cta">Abrir plano →</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function PMPill({ label, pct, zone, tone }) {
  return (
    <div className="pm-pill">
      <div className="pm-pill-head">
        <span className="pm-pill-label">{label}</span>
        <span className="pm-pill-pct">{pct}</span>
      </div>
      <div className="pm-pill-bar"><span className={`pm-pill-fill pm-${tone}`} style={{ width: `${pct}%` }} /></div>
      <div className={`pm-pill-zone pmz-${zone === 'Atenção' ? 'a' : zone === 'Em desenvolvimento' ? 'b' : zone === 'Consolidado' ? 'c' : 'd'}`}>
        {zone}
      </div>
    </div>
  );
}

Object.assign(window, { Boia, HeroVisual, StudentPortrait, PillarVisual, PlatformMock, BV_COLORS });