// Dois mundos — toggle Empresarial vs. Construtor with animated construction scenes.

function AudienceToggle() {
  const [mode, setMode] = React.useState("empresarial");
  const [inView, setInView] = React.useState(false);
  const sectionRef = React.useRef(null);
  const empRef = React.useRef(null);
  const conRef = React.useRef(null);
  const playedRef = React.useRef({ empresarial: false, construtor: false });

  // Detect when the section enters the viewport (≥35% visible).
  React.useEffect(() => {
    if (!sectionRef.current) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach(e => { if (e.isIntersecting) setInView(true); });
      },
      { threshold: 0.35 }
    );
    io.observe(sectionRef.current);
    return () => io.disconnect();
  }, []);

  // Pause inactive video; start (or hold) active video.
  // Each video plays exactly once — the first time its tab is selected
  // AND the section is in view. After it ends, it freezes on the last frame.
  React.useEffect(() => {
    if (!inView) return;
    const active = mode === "empresarial" ? empRef.current : conRef.current;
    const inactive = mode === "empresarial" ? conRef.current : empRef.current;
    if (inactive) inactive.pause();
    if (active && !playedRef.current[mode]) {
      try { active.currentTime = 0; } catch (e) {}
      const p = active.play();
      if (p && p.catch) p.catch(() => {});
      playedRef.current[mode] = true;
    }
  }, [mode, inView]);

  const data = {
    empresarial: {
      title: "Modo Empresarial",
      tag: "Para empreiteiros e empresas",
      headline: "Muitas obras. Muita equipe. Um só painel.",
      sub: "DRE consolidado da empresa, equipe por obra, contas a receber, assistência técnica. Tudo o que sua planilha não consegue.",
      bullets: [
        "Múltiplas obras simultâneas com margem por projeto",
        "DRE consolidado da empresa toda",
        "Controle de equipe própria com check-in geolocalizado",
        "Contas a pagar/receber + assistência técnica",
      ],
      accent: "var(--blue-600)",
      from: "R$ 159,99",
    },
    construtor: {
      title: "Modo Construtor",
      tag: "Para autônomos e pequenas reformas",
      headline: "Sua obra. Seu controle. Sem complicação.",
      sub: "Versão enxuta pra quem quer apenas gerenciar etapas e gastos de suas obras.",
      bullets: [
        "Gráficos e Resultados Instantâneos",
        "Lançamento rápido de gastos pelo celular",
        "Controle de etapas da Obra",
        "Fechamento da obra em 1 tela",
      ],
      accent: "var(--green-600)",
      from: "R$ 49,00",
    },
  };

  const d = data[mode];

  return (
    <section id="dois-mundos" ref={sectionRef} style={{
      paddingTop: 130, paddingBottom: 130,
      overflow: "hidden",
      position: "relative",
    }}>
      {/* Soft ambient backdrop */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background:
          mode === "empresarial"
            ? "radial-gradient(ellipse at 30% 40%, rgba(42,91,255,.18), transparent 60%)"
            : "radial-gradient(ellipse at 30% 40%, rgba(245,158,11,.14), transparent 60%)",
        transition: "background 1s ease",
        pointerEvents: "none",
      }} />

      <div className="container relative">
        <div style={{ maxWidth: 760, marginBottom: 40 }}>
          <div className="t-eyebrow" style={{ marginBottom: 16 }}>
            Dois mundos · uma plataforma
          </div>
          <h2 className="t-h1" style={{ margin: 0, marginBottom: 16 }}>
            BinGest se adapta ao seu tamanho.
          </h2>
          <p className="t-lead">
            Toque pra ver. A interface, os relatórios e o preço mudam pra
            servir empreiteiro com 12 obras ou pedreiro autônomo com 1 reforma.
          </p>
        </div>

        {/* Big segmented toggle */}
        <div style={{
          display: "inline-flex",
          padding: 6,
          borderRadius: 999,
          background: "rgba(255,255,255,.04)",
          border: "1px solid rgba(255,255,255,.10)",
          marginBottom: 36,
          position: "relative",
          backdropFilter: "blur(8px)",
        }}>
          <div style={{
            position: "absolute",
            top: 6, bottom: 6,
            left: mode === "empresarial" ? 6 : "calc(50% + 3px)",
            width: "calc(50% - 9px)",
            background: data[mode].accent,
            borderRadius: 999,
            transition: "left .45s cubic-bezier(.5,.1,.3,1), background .35s ease",
            boxShadow: "0 6px 20px rgba(0,0,0,.35)",
          }} />
          {["empresarial", "construtor"].map(k => (
            <button key={k}
              onClick={() => setMode(k)}
              style={{
                position: "relative", zIndex: 1,
                background: "transparent",
                color: mode === k ? "#fff" : "rgba(255,255,255,.7)",
                border: "none",
                padding: "14px 26px",
                fontSize: 14.5,
                fontWeight: mode === k ? 600 : 500,
                letterSpacing: "-0.005em",
                transition: "color .3s",
                display: "inline-flex", alignItems: "center", gap: 10,
                cursor: "pointer",
              }}>
              {k === "empresarial" ? <IconBuilding size={16} /> : <IconHelmet size={16} />}
              {k === "empresarial" ? "Empresarial" : "Construtor"}
            </button>
          ))}
        </div>

        {/* Scene + content split */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.15fr 1fr",
          gap: 40, alignItems: "stretch",
        }} className="dm-grid">

          {/* Scene */}
          <div style={{
            position: "relative",
            borderRadius: 24,
            overflow: "hidden",
            background: "#000",
            minHeight: 480,
            border: "1px solid rgba(255,255,255,.10)",
            boxShadow: "var(--shadow-pop)",
          }}>
            {/* Real timelapse videos — user-supplied. Cross-fade on toggle. */}
            <video
              key="empresarial-vid"
              ref={empRef}
              src="assets/timepredio.mp4"
              muted playsInline preload="auto"
              style={{
                position: "absolute", inset: 0,
                width: "100%", height: "100%",
                objectFit: "cover",
                opacity: mode === "empresarial" ? 1 : 0,
                transition: "opacity .8s ease",
              }}
            />
            <video
              key="construtor-vid"
              ref={conRef}
              src="assets/timecasa.mp4"
              muted playsInline preload="auto"
              style={{
                position: "absolute", inset: 0,
                width: "100%", height: "100%",
                objectFit: "cover",
                opacity: mode === "construtor" ? 1 : 0,
                transition: "opacity .8s ease",
              }}
            />

            {/* Floor stamp */}
            <div style={{
              position: "absolute", bottom: 20, left: 20,
              padding: "6px 12px", borderRadius: 999,
              background: "rgba(0,0,0,.45)", color: "#fff",
              backdropFilter: "blur(8px)",
              fontSize: 11, fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase",
              border: "1px solid rgba(255,255,255,.15)",
              zIndex: 3,
              pointerEvents: "none",
              display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999, background: "var(--green-500)",
                animation: "hotspot-pulse 1.6s ease-out infinite",
              }} />
              Timelapse · cena ao vivo
            </div>
            <div style={{
              position: "absolute", top: 20, right: 20,
              padding: "6px 12px", borderRadius: 999,
              background: "rgba(0,0,0,.45)", color: "#fff",
              backdropFilter: "blur(8px)",
              fontSize: 11, fontWeight: 600, letterSpacing: ".06em",
              border: "1px solid rgba(255,255,255,.15)",
              zIndex: 3,
              pointerEvents: "none",
            }}>
              {mode === "empresarial" ? "PRÉDIO · MODO EMPRESARIAL" : "CASA · MODO CONSTRUTOR"}
            </div>

            {/* Subtle gradient overlay for text readability */}
            <div aria-hidden="true" style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.25) 100%)",
              pointerEvents: "none",
              zIndex: 2,
            }} />
          </div>

          {/* Content */}
          <div key={mode} style={{ animation: "fade-up .5s ease both", display: "flex", flexDirection: "column" }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "5px 12px", borderRadius: 999,
              background: "rgba(255,255,255,.06)", color: "rgba(255,255,255,.85)",
              border: "1px solid rgba(255,255,255,.12)",
              fontSize: 12, fontWeight: 600, letterSpacing: ".04em",
              alignSelf: "flex-start", marginBottom: 18,
              backdropFilter: "blur(8px)",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: d.accent }} />
              {d.tag}
            </div>

            <h3 style={{
              margin: 0, marginBottom: 16,
              fontSize: "clamp(28px, 3vw, 40px)",
              lineHeight: 1.05, letterSpacing: "-0.02em",
              fontWeight: 600, color: "#fff",
            }}>{d.headline}</h3>

            <p style={{
              margin: 0, marginBottom: 22,
              color: "rgba(255,255,255,.7)", fontSize: 17, lineHeight: 1.55,
            }}>{d.sub}</p>

            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 12, marginBottom: 28 }}>
              {d.bullets.map((b, i) => (
                <li key={i} style={{
                  display: "flex", alignItems: "flex-start", gap: 12,
                  fontSize: 14.5, color: "rgba(255,255,255,.85)",
                }}>
                  <span style={{
                    flex: "0 0 24px", width: 24, height: 24, borderRadius: 999,
                    background: d.accent, color: "#fff",
                    display: "grid", placeItems: "center", marginTop: 1,
                  }}>
                    <IconCheck size={13} />
                  </span>
                  {b}
                </li>
              ))}
            </ul>

            <div style={{
              marginTop: "auto",
              display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap",
              padding: "16px 18px", borderRadius: 14,
              background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.10)",
              backdropFilter: "blur(8px)",
            }}>
              <div>
                <div style={{ fontSize: 11, color: "rgba(255,255,255,.55)", letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 600 }}>
                  A partir de
                </div>
                <div className="mono" style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.02em", color: "#fff" }}>
                  {d.from}<span style={{ fontSize: 13, color: "rgba(255,255,255,.5)", fontWeight: 500 }}>/mês</span>
                </div>
              </div>
              <a href="#precos" className="btn btn-blue btn-sm" style={{
                marginLeft: "auto",
                background: d.accent, boxShadow: `0 10px 24px -10px ${d.accent}`,
              }}>
                Começar grátis · 7 dias <IconArrow size={14} />
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #dois-mundos .dm-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// --- Scene: Empresarial (prédio com guindaste) -----------------------------
function SceneEmpresarial({ active }) {
  // 8-story building rises, crane swings, workers move. Pure SVG with CSS.
  return (
    <div style={{
      position: "absolute", inset: 0,
      opacity: active ? 1 : 0,
      transition: "opacity .6s ease",
      pointerEvents: "none",
    }}>
      <style>{`
        @keyframes emp-floor {
          0%   { transform: translateY(20px); opacity: 0; }
          8%   { transform: translateY(0); opacity: 1; }
          90%  { transform: translateY(0); opacity: 1; }
          100% { transform: translateY(0); opacity: 1; }
        }
        @keyframes emp-window {
          0%, 30%  { fill: rgba(255,255,255,.05); }
          50%      { fill: #FFE08A; }
          80%      { fill: #FFE08A; }
          100%     { fill: rgba(255,255,255,.05); }
        }
        @keyframes emp-crane-arm {
          0%, 100% { transform: rotate(-6deg); }
          50%      { transform: rotate(6deg); }
        }
        @keyframes emp-crane-hook {
          0%, 100% { transform: translateY(0); }
          50%      { transform: translateY(40px); }
        }
        @keyframes emp-truck {
          0%   { transform: translateX(-80px); }
          45%  { transform: translateX(620px); }
          50%  { transform: translateX(620px); }
          95%  { transform: translateX(-80px); }
          100% { transform: translateX(-80px); }
        }
        @keyframes emp-cloud {
          0%   { transform: translateX(0); }
          100% { transform: translateX(420px); }
        }
        @keyframes emp-dust {
          0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
          40%  { opacity: 0.5; }
          100% { opacity: 0; transform: translate(-30px, -36px) scale(1.6); }
        }
        @keyframes emp-worker-bob {
          0%, 100% { transform: translateY(0); }
          50%      { transform: translateY(-2px); }
        }
        @keyframes emp-sun {
          0%, 100% { transform: rotate(0deg); }
          50%      { transform: rotate(180deg); }
        }
        .emp-floor { animation: emp-floor 9s ease-out infinite; transform-origin: center bottom; }
        .emp-crane-arm { animation: emp-crane-arm 7s ease-in-out infinite; transform-origin: 90px 60px; }
        .emp-crane-hook { animation: emp-crane-hook 7s ease-in-out infinite; }
        .emp-truck { animation: emp-truck 14s ease-in-out infinite; }
        .emp-cloud { animation: emp-cloud 50s linear infinite; }
        .emp-dust { animation: emp-dust 2.2s ease-out infinite; }
        .emp-worker-bob { animation: emp-worker-bob 1.4s ease-in-out infinite; }
      `}</style>

      <svg viewBox="0 0 600 480" preserveAspectRatio="xMidYMax slice" style={{ width: "100%", height: "100%", display: "block" }}>
        {/* Clouds */}
        <g opacity="0.5" className="emp-cloud">
          <ellipse cx="60" cy="50" rx="40" ry="10" fill="#fff" />
          <ellipse cx="180" cy="70" rx="30" ry="8" fill="#fff" />
          <ellipse cx="-100" cy="50" rx="40" ry="10" fill="#fff" />
          <ellipse cx="-220" cy="70" rx="30" ry="8" fill="#fff" />
        </g>

        {/* Background skyline (existing city) */}
        <g opacity="0.35">
          <rect x="-10" y="290" width="50" height="180" fill="#1B2D5E" />
          <rect x="42" y="310" width="40" height="160" fill="#0F1A3A" />
          <rect x="84" y="270" width="34" height="200" fill="#1B2D5E" />
          <rect x="510" y="290" width="40" height="180" fill="#0F1A3A" />
          <rect x="552" y="310" width="50" height="160" fill="#1B2D5E" />
        </g>

        {/* Crane */}
        <g transform="translate(120, 30)">
          {/* Mast */}
          <rect x="86" y="60" width="8" height="280" fill="#FF6B35" />
          <rect x="84" y="338" width="12" height="6" fill="#1F2740" />
          {/* Cross braces */}
          {[80,120,160,200,240,280].map(y => (
            <line key={y} x1="86" y1={y} x2="94" y2={y+20} stroke="#1F2740" strokeWidth="1.5" />
          ))}
          {/* Arm */}
          <g className="emp-crane-arm">
            <rect x="10" y="56" width="170" height="6" fill="#FF6B35" />
            <rect x="-30" y="56" width="50" height="6" fill="#FF6B35" />
            {/* Counterweight */}
            <rect x="-40" y="50" width="14" height="20" fill="#1F2740" />
            {/* Pylon */}
            <polygon points="80,42 100,42 90,58" fill="#FF6B35" />
            {/* Cable + hook */}
            <line x1="160" y1="62" x2="160" y2="120" stroke="#1F2740" strokeWidth="1.5" />
            <g className="emp-crane-hook" style={{ transformOrigin: "160px 120px" }}>
              <rect x="155" y="118" width="10" height="10" fill="#1F2740" />
              <path d="M158 128 q2 4 4 0" stroke="#1F2740" strokeWidth="1.5" fill="none" />
            </g>
          </g>
        </g>

        {/* Building (rising floor by floor — 8 floors) */}
        <g transform="translate(280, 110)">
          {[7,6,5,4,3,2,1,0].map((f, idx) => {
            const fh = 32;
            const y = f * fh;
            return (
              <g key={f}
                 className="emp-floor"
                 style={{ animationDelay: `${idx * 0.45}s` }}>
                {/* Slab */}
                <rect x="0" y={y} width="160" height={fh} fill={f === 0 ? "#1F2740" : "#3E4F88"} />
                <rect x="0" y={y} width="160" height={fh} fill="none" stroke="rgba(0,0,0,.15)" />
                {/* Windows */}
                {[0,1,2,3,4].map(w => (
                  <rect key={w}
                    x={12 + w*30} y={y+8} width="22" height={fh-16}
                    fill="rgba(255,255,255,.05)"
                    className="emp-window"
                    style={{
                      animation: `emp-window 4.5s ease-in-out infinite`,
                      animationDelay: `${(idx*0.3) + w*0.15}s`,
                    }}
                  />
                ))}
              </g>
            );
          })}
          {/* Scaffolding overlay */}
          <g stroke="#FF6B35" strokeWidth="1" opacity="0.6">
            <line x1="0" y1="0" x2="0" y2="256" />
            <line x1="160" y1="0" x2="160" y2="256" />
            {[0,1,2,3,4,5,6,7].map(i => (
              <line key={i} x1="-4" y1={i*32 + 16} x2="164" y2={i*32 + 16} />
            ))}
          </g>
        </g>

        {/* Ground */}
        <rect x="0" y="400" width="600" height="80" fill="#3E2D1F" />
        <rect x="0" y="400" width="600" height="4" fill="#1F2740" />

        {/* Dust puffs from crane area */}
        {[0,1,2].map(i => (
          <g key={i} className="emp-dust" style={{ animationDelay: `${i*0.7}s` }}>
            <ellipse cx={210 + i*15} cy="395" rx="14" ry="6" fill="rgba(255,240,200,.5)" />
          </g>
        ))}

        {/* Cement truck driving across the bottom */}
        <g className="emp-truck" style={{ transform: "translateX(-80px) translateY(370px)" }}>
          <g>
            <rect x="0" y="0" width="48" height="20" rx="2" fill="#FFB400" />
            <rect x="38" y="-8" width="16" height="14" rx="2" fill="#1F2740" />
            <circle cx="35" cy="22" r="6" fill="#1F2740" />
            <circle cx="35" cy="22" r="2.5" fill="#666" />
            <circle cx="12" cy="22" r="6" fill="#1F2740" />
            <circle cx="12" cy="22" r="2.5" fill="#666" />
            {/* Drum */}
            <ellipse cx="22" cy="0" rx="14" ry="9" fill="#FF6B35" />
          </g>
        </g>

        {/* Workers */}
        <g transform="translate(440, 384)">
          <g className="emp-worker-bob">
            <rect x="-2" y="-12" width="4" height="10" fill="#FFB400" />
            <circle cx="0" cy="-14" r="2.4" fill="#FFB400" />
            <rect x="-3" y="-16" width="6" height="2" fill="#FFB400" />
          </g>
        </g>
        <g transform="translate(460, 386)">
          <g className="emp-worker-bob" style={{ animationDelay: ".6s" }}>
            <rect x="-2" y="-12" width="4" height="10" fill="#FFB400" />
            <circle cx="0" cy="-14" r="2.4" fill="#FFB400" />
            <rect x="-3" y="-16" width="6" height="2" fill="#FFB400" />
          </g>
        </g>
      </svg>
    </div>
  );
}

// --- Scene: Construtor (casa em construção) --------------------------------
function SceneConstrutor({ active }) {
  return (
    <div style={{
      position: "absolute", inset: 0,
      opacity: active ? 1 : 0,
      transition: "opacity .6s ease",
      pointerEvents: "none",
    }}>
      <style>{`
        @keyframes con-foundation { 0%, 5% { opacity: 0; } 12%, 100% { opacity: 1; } }
        @keyframes con-walls      { 0%, 18% { opacity: 0; transform: translateY(40px); }
                                   28%, 100% { opacity: 1; transform: translateY(0); } }
        @keyframes con-roof       { 0%, 32% { opacity: 0; transform: translateY(-40px); }
                                    42%, 100% { opacity: 1; transform: translateY(0); } }
        @keyframes con-door       { 0%, 48% { opacity: 0; transform: scaleY(0); }
                                    58%, 100% { opacity: 1; transform: scaleY(1); } }
        @keyframes con-windows    { 0%, 56% { opacity: 0; }
                                    66%, 100% { opacity: 1; } }
        @keyframes con-chimney-smoke {
          0%   { opacity: 0; transform: translate(0,0) scale(0.6); }
          40%  { opacity: 0.7; }
          100% { opacity: 0; transform: translate(8px, -50px) scale(1.6); }
        }
        @keyframes con-saw {
          0%, 100% { transform: rotate(0); }
          50%      { transform: rotate(8deg); }
        }
        @keyframes con-restart {
          0%, 92% { opacity: 1; }
          95%, 100% { opacity: 0; }
        }
        .con-foundation { animation: con-foundation 11s ease-out infinite; }
        .con-walls      { animation: con-walls 11s ease-out infinite; transform-origin: bottom; }
        .con-roof       { animation: con-roof 11s ease-out infinite; transform-origin: bottom; }
        .con-door       { animation: con-door 11s ease-out infinite; transform-origin: bottom; }
        .con-windows    { animation: con-windows 11s ease-out infinite; }
        .con-chimney    { animation: con-chimney-smoke 2.8s ease-out infinite; }
        .con-saw        { animation: con-saw .5s ease-in-out infinite; transform-origin: 50% 50%; }
        .con-loop       { animation: con-restart 11s linear infinite; }
      `}</style>

      <svg viewBox="0 0 600 480" preserveAspectRatio="xMidYMax slice" style={{ width: "100%", height: "100%", display: "block" }}>
        {/* Sun */}
        <circle cx="500" cy="90" r="40" fill="#FFD580" opacity="0.7" />
        <circle cx="500" cy="90" r="60" fill="#FFD580" opacity="0.25" />

        {/* Distant hills */}
        <path d="M0 320 Q 150 280 300 310 T 600 300 V480 H0Z" fill="#5C7DAD" opacity="0.4" />
        <path d="M0 360 Q 200 320 400 340 T 600 350 V480 H0Z" fill="#6B8DBF" opacity="0.5" />

        {/* Ground / lote */}
        <rect x="0" y="380" width="600" height="100" fill="#8B5A3B" />
        <rect x="0" y="380" width="600" height="4" fill="#4A2D1A" />
        {/* Grass tufts */}
        {[20, 80, 540, 580].map((x, i) => (
          <g key={i}>
            <path d={`M${x} 380 l-3 -10 M${x} 380 l0 -12 M${x} 380 l3 -10`} stroke="#3D7B3A" strokeWidth="1.5" />
          </g>
        ))}

        {/* Pile of bricks */}
        <g transform="translate(40, 370)" className="con-loop">
          {[0,1,2].map(r => (
            [0,1,2,3].slice(0, 4-r).map(c => (
              <rect key={`${r}-${c}`} x={c*14 + r*7} y={-r*8 - 8} width="13" height="7" fill="#B85D3F" stroke="#8B3F2A" strokeWidth="0.5"/>
            ))
          ))}
        </g>

        {/* House group */}
        <g transform="translate(170, 0)">
          {/* Foundation */}
          <g className="con-foundation">
            <rect x="0" y="350" width="280" height="30" fill="#5C5C5C" />
            <rect x="0" y="350" width="280" height="4" fill="#3F3F3F" />
            {/* Hash texture */}
            {[0,1,2,3,4,5,6].map(i => (
              <line key={i} x1={i*40} y1="350" x2={i*40} y2="380" stroke="#3F3F3F" strokeWidth="1" opacity="0.4" />
            ))}
          </g>

          {/* Walls */}
          <g className="con-walls">
            <rect x="10" y="240" width="260" height="110" fill="#F3E0C0" stroke="#C9A878" strokeWidth="1.5"/>
            {/* Brick pattern */}
            {[0,1,2,3,4].map(row => (
              [...Array(10).keys()].map(col => (
                <line key={`${row}-${col}`}
                  x1={10 + col*26 + (row%2?13:0)} y1={250 + row*20}
                  x2={20 + col*26 + (row%2?13:0)} y2={250 + row*20}
                  stroke="#C9A878" strokeWidth="0.8" opacity="0.6"
                />
              ))
            ))}
          </g>

          {/* Roof */}
          <g className="con-roof">
            <polygon points="-10,250 290,250 220,180 60,180" fill="#A53F2B" stroke="#7A2D1F" strokeWidth="1.5" />
            <polygon points="-10,250 290,250 220,180 60,180" fill="none" stroke="#7A2D1F" strokeWidth="1" opacity="0.3" />
            {/* Roof tiles */}
            {[0,1,2,3].map(i => (
              <line key={i} x1={-5 + i*8} y1={246 - i*16} x2={295 - i*8} y2={246 - i*16} stroke="#7A2D1F" strokeWidth="0.8" opacity="0.5"/>
            ))}
            {/* Chimney */}
            <rect x="190" y="170" width="22" height="40" fill="#B85D3F" stroke="#7A2D1F" strokeWidth="1" />
            <rect x="188" y="168" width="26" height="6" fill="#7A2D1F" />
            {/* Smoke */}
            <g className="con-chimney">
              <ellipse cx="201" cy="160" rx="8" ry="5" fill="#fff" opacity="0.7"/>
            </g>
            <g className="con-chimney" style={{ animationDelay: "1s" }}>
              <ellipse cx="201" cy="160" rx="6" ry="4" fill="#fff" opacity="0.7"/>
            </g>
          </g>

          {/* Door */}
          <g className="con-door">
            <rect x="120" y="280" width="40" height="70" fill="#5A3525" stroke="#3F2418" strokeWidth="1.5"/>
            <rect x="124" y="285" width="14" height="14" fill="#2B1810" />
            <rect x="142" y="285" width="14" height="14" fill="#2B1810" />
            <circle cx="152" cy="320" r="2" fill="#D4AF37" />
          </g>

          {/* Windows */}
          <g className="con-windows">
            <rect x="30" y="265" width="50" height="40" fill="#7FB8D9" stroke="#2A4F66" strokeWidth="1.5"/>
            <line x1="55" y1="265" x2="55" y2="305" stroke="#2A4F66" strokeWidth="1.5"/>
            <line x1="30" y1="285" x2="80" y2="285" stroke="#2A4F66" strokeWidth="1.5"/>
            <rect x="200" y="265" width="50" height="40" fill="#7FB8D9" stroke="#2A4F66" strokeWidth="1.5"/>
            <line x1="225" y1="265" x2="225" y2="305" stroke="#2A4F66" strokeWidth="1.5"/>
            <line x1="200" y1="285" x2="250" y2="285" stroke="#2A4F66" strokeWidth="1.5"/>
          </g>
        </g>

        {/* Worker with saw on right */}
        <g transform="translate(490, 380)">
          {/* Sawhorse */}
          <rect x="-20" y="-10" width="40" height="3" fill="#8B5A3B" />
          <line x1="-15" y1="-10" x2="-22" y2="0" stroke="#8B5A3B" strokeWidth="2"/>
          <line x1="15" y1="-10" x2="22" y2="0" stroke="#8B5A3B" strokeWidth="2"/>
          {/* Plank */}
          <rect x="-25" y="-13" width="50" height="4" fill="#D4A574" />
          {/* Worker */}
          <g transform="translate(-30, -45)">
            <rect x="-3" y="0" width="6" height="20" fill="#FFB400" />
            <circle cx="0" cy="-4" r="4" fill="#F5D5A0" />
            <rect x="-5" y="-8" width="10" height="3" fill="#FFB400" />
            {/* Arm with saw */}
            <g transform="translate(2, 8)">
              <g className="con-saw" style={{ transformOrigin: "0 0" }}>
                <rect x="0" y="-1" width="14" height="2" fill="#FFB400" />
                <rect x="14" y="-3" width="16" height="6" fill="#C8C8C8" stroke="#666" strokeWidth="0.5"/>
                <line x1="14" y1="2" x2="30" y2="2" stroke="#fff" strokeWidth="1"/>
              </g>
            </g>
          </g>
        </g>

        {/* Picket fence */}
        <g transform="translate(0, 365)" opacity="0.6">
          {[5, 18, 31, 44, 57, 70, 83, 96, 109, 122, 135, 148].map(x => (
            <polygon key={x} points={`${x},20 ${x},0 ${x+5},-5 ${x+10},0 ${x+10},20`} fill="#D4A574" />
          ))}
          <rect x="0" y="6" width="160" height="3" fill="#A6814F" />
          <rect x="0" y="14" width="160" height="3" fill="#A6814F" />
        </g>
      </svg>
    </div>
  );
}

window.AudienceToggle = AudienceToggle;