import React, { useState, useEffect, useMemo } from 'react';
import {
  ArrowUpRight, ArrowRight, ArrowLeft, Menu, X, Lock, LogOut,
  Search, Filter, Mail, Phone, MapPin, Calendar, DollarSign,
  Home as HomeIcon, Briefcase, Trash2, ChevronDown, Check,
  TrendingUp, Users, FileText, Clock, Download, Eye
} from 'lucide-react';

// ============================================================
// CONFIG
// ============================================================
const STUDIO = {
  name: 'CasAmarela',
  suffix: 'Studio',
  tagline: 'Estúdio de arquitetura contemporânea',
  architect: 'Davi Porto',
  cau: 'A325590-5',
  city: 'Fortaleza, CE',
  email: 'contato@casamarela.studio',
  whatsapp: '+55 85 ',
  instagram: '@casamarela.studio',
  founded: '2026',
};

const ADMIN_PASSWORD_DEFAULT = 'casamarela2026';

const STATUSES = [
  { id: 'lead', label: 'Lead', color: '#8B7E6F' },
  { id: 'qualificado', label: 'Qualificado', color: '#5D7B8A' },
  { id: 'proposta', label: 'Proposta', color: '#B8893B' },
  { id: 'negociacao', label: 'Negociação', color: '#A35C3A' },
  { id: 'fechado', label: 'Fechado', color: '#4A6B47' },
  { id: 'perdido', label: 'Perdido', color: '#9C9489' },
];

const PROJECTS = [
  {
    id: 1, name: 'Casa Vento', year: '2026', location: 'Aquiraz, CE',
    type: 'Residencial', area: '320 m²',
    description: 'Uma residência que respira. Pátios internos, ventilação cruzada e materiais nativos do litoral cearense compõem uma casa que dispensa ar-condicionado durante quase todo o ano.',
    palette: ['#D8B98E', '#8B6F4E', '#E8DDC8'],
  },
  {
    id: 2, name: 'Pavilhão Oiticica', year: '2025', location: 'Fortaleza, CE',
    type: 'Cultural · TFG', area: '1.200 m²',
    description: 'Estudo conceitual de pavilhão cultural inspirado em Hélio Oiticica. Estrutura modular em concreto aparente com penetráveis de tecido tropical.',
    palette: ['#C9A961', '#1F1B17', '#F4EEE3'],
  },
  {
    id: 3, name: 'Apartamento 808', year: '2025', location: 'Aldeota, Fortaleza',
    type: 'Reforma · Interiores', area: '110 m²',
    description: 'Reforma integral de apartamento dos anos 80. Derrubada de paredes, integração total da área social e marcenaria sob medida em freijó.',
    palette: ['#E8DDC8', '#B8893B', '#1F1B17'],
  },
  {
    id: 4, name: 'Casa Lobão', year: '2026', location: 'Eusébio, CE',
    type: 'Residencial', area: '280 m²',
    description: 'Casa de campo com cobertura em telha cerâmica, varandas profundas e jardim interno. Homenagem à arquitetura nordestina contemporânea.',
    palette: ['#A35C3A', '#D8B98E', '#F4EEE3'],
  },
  {
    id: 5, name: 'Café Caju', year: '2025', location: 'Praia de Iracema',
    type: 'Comercial', area: '85 m²',
    description: 'Cafeteria de bairro com balcão em madeira de demolição, piso cimentício e iluminação afetiva. Um lugar para ficar.',
    palette: ['#5D7B8A', '#E8DDC8', '#8B6F4E'],
  },
  {
    id: 6, name: 'Galpão Maceió', year: '2024', location: 'Maceió, AL',
    type: 'Galeria · Acadêmico', area: '450 m²',
    description: 'Conversão de galpão portuário em espaço expositivo. Estrutura metálica preservada, intervenção mínima, máximo respeito à pré-existência.',
    palette: ['#1F1B17', '#9C9489', '#C9A961'],
  },
];

// ============================================================
// STORAGE HELPERS
// ============================================================
const storage = {
  async saveBriefing(data) {
    const id = `brief_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
    const record = {
      id,
      status: 'lead',
      createdAt: new Date().toISOString(),
      notes: '',
      ...data,
    };
    try {
      await window.storage.set(`briefing:${id}`, JSON.stringify(record), true);
      return record;
    } catch (e) {
      console.error('save error', e);
      return null;
    }
  },
  async getAllBriefings() {
    try {
      const list = await window.storage.list('briefing:', true);
      if (!list || !list.keys) return [];
      const records = await Promise.all(
        list.keys.map(async (k) => {
          try {
            const r = await window.storage.get(k, true);
            return r ? JSON.parse(r.value) : null;
          } catch { return null; }
        })
      );
      return records.filter(Boolean).sort((a, b) =>
        new Date(b.createdAt) - new Date(a.createdAt)
      );
    } catch (e) {
      console.error('list error', e);
      return [];
    }
  },
  async updateBriefing(id, updates) {
    try {
      const existing = await window.storage.get(`briefing:${id}`, true);
      if (!existing) return null;
      const record = { ...JSON.parse(existing.value), ...updates };
      await window.storage.set(`briefing:${id}`, JSON.stringify(record), true);
      return record;
    } catch (e) { console.error('update error', e); return null; }
  },
  async deleteBriefing(id) {
    try { await window.storage.delete(`briefing:${id}`, true); return true; }
    catch (e) { console.error('delete error', e); return false; }
  },
  async getPassword() {
    try {
      const r = await window.storage.get('admin_pwd', false);
      return r ? r.value : ADMIN_PASSWORD_DEFAULT;
    } catch { return ADMIN_PASSWORD_DEFAULT; }
  },
  async setPassword(pwd) {
    try { await window.storage.set('admin_pwd', pwd, false); return true; }
    catch { return false; }
  },
};

// ============================================================
// FONT LOADER
// ============================================================
function useGoogleFonts() {
  useEffect(() => {
    const id = 'casamarela-fonts';
    if (document.getElementById(id)) return;
    const link = document.createElement('link');
    link.id = id;
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap';
    document.head.appendChild(link);
  }, []);
}

// ============================================================
// SHARED UI
// ============================================================
const Header = ({ page, setPage, adminAuthed }) => {
  const [open, setOpen] = useState(false);
  const links = [
    { id: 'home', label: 'Início' },
    { id: 'projects', label: 'Projetos' },
    { id: 'studio', label: 'Estúdio' },
    { id: 'briefing', label: 'Briefing' },
  ];
  const go = (id) => { setPage(id); setOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  return (
    <header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-[#F4EEE3]/85 border-b border-[#1F1B17]/8">
      <div className="max-w-[1600px] mx-auto px-6 md:px-10 py-5 flex items-center justify-between">
        <button onClick={() => go('home')} className="flex items-baseline gap-1 group">
          <span className="font-fraunces text-[22px] tracking-tight text-[#1F1B17] font-medium italic">Cas</span>
          <span className="font-fraunces text-[22px] tracking-tight text-[#B8893B] font-medium italic">Amarela</span>
          <span className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C] ml-2 mb-0.5">Studio</span>
        </button>

        <nav className="hidden md:flex items-center gap-9">
          {links.map(l => (
            <button key={l.id} onClick={() => go(l.id)}
              className={`font-dm text-[13px] tracking-wide transition-colors ${page === l.id ? 'text-[#1F1B17]' : 'text-[#756A5C] hover:text-[#1F1B17]'}`}>
              {l.label}
              {page === l.id && <span className="block h-px bg-[#B8893B] mt-1" />}
            </button>
          ))}
          <button onClick={() => go(adminAuthed ? 'dashboard' : 'login')}
            className="font-dm text-[13px] tracking-wide text-[#1F1B17] flex items-center gap-1.5 border-l border-[#1F1B17]/15 pl-9">
            <Lock size={13} /> {adminAuthed ? 'Painel' : 'Acesso'}
          </button>
        </nav>

        <button onClick={() => setOpen(!open)} className="md:hidden text-[#1F1B17]">
          {open ? <X size={22} /> : <Menu size={22} />}
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-[#1F1B17]/8 bg-[#F4EEE3]">
          <div className="px-6 py-6 flex flex-col gap-4">
            {links.map(l => (
              <button key={l.id} onClick={() => go(l.id)}
                className="font-dm text-[15px] text-left text-[#1F1B17]">{l.label}</button>
            ))}
            <button onClick={() => go(adminAuthed ? 'dashboard' : 'login')}
              className="font-dm text-[15px] text-left text-[#1F1B17] flex items-center gap-2 pt-2 border-t border-[#1F1B17]/10">
              <Lock size={14} /> {adminAuthed ? 'Painel' : 'Acesso'}
            </button>
          </div>
        </div>
      )}
    </header>
  );
};

const Footer = ({ setPage }) => (
  <footer className="border-t border-[#1F1B17]/10 mt-32">
    <div className="max-w-[1600px] mx-auto px-6 md:px-10 py-16">
      <div className="grid md:grid-cols-12 gap-10">
        <div className="md:col-span-5">
          <div className="flex items-baseline gap-1">
            <span className="font-fraunces text-[28px] italic text-[#1F1B17]">Cas</span>
            <span className="font-fraunces text-[28px] italic text-[#B8893B]">Amarela</span>
          </div>
          <p className="font-fraunces italic text-[#756A5C] text-[15px] mt-2 max-w-sm leading-relaxed">
            Arquitetura que escuta o lugar, o cliente e o tempo.
          </p>
        </div>

        <div className="md:col-span-3">
          <p className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C] mb-4">Contato</p>
          <p className="font-dm text-[14px] text-[#1F1B17] mb-1.5">{STUDIO.email}</p>
          <p className="font-dm text-[14px] text-[#1F1B17] mb-1.5">{STUDIO.instagram}</p>
          <p className="font-dm text-[14px] text-[#756A5C]">{STUDIO.city}</p>
        </div>

        <div className="md:col-span-2">
          <p className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C] mb-4">Navegação</p>
          {['home','projects','studio','briefing'].map(id => (
            <button key={id} onClick={() => { setPage(id); window.scrollTo({top:0}); }}
              className="block font-dm text-[14px] text-[#1F1B17] hover:text-[#B8893B] mb-1.5 capitalize">
              {id === 'home' ? 'Início' : id === 'projects' ? 'Projetos' : id === 'studio' ? 'Estúdio' : 'Briefing'}
            </button>
          ))}
        </div>

        <div className="md:col-span-2">
          <p className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C] mb-4">Registro</p>
          <p className="font-dm text-[14px] text-[#1F1B17] mb-1.5">CAU {STUDIO.cau}</p>
          <p className="font-dm text-[14px] text-[#756A5C]">Desde {STUDIO.founded}</p>
        </div>
      </div>

      <div className="mt-16 pt-6 border-t border-[#1F1B17]/10 flex flex-col md:flex-row justify-between gap-3">
        <p className="font-dm text-[12px] text-[#756A5C]">© {new Date().getFullYear()} {STUDIO.name} {STUDIO.suffix}. Todos os direitos reservados.</p>
        <p className="font-dm text-[12px] text-[#756A5C] italic">Onde o sol entra primeiro.</p>
      </div>
    </div>
  </footer>
);

// ============================================================
// PROJECT TILE (CSS-rendered architectural mood)
// ============================================================
const ProjectTile = ({ project, onClick, large }) => (
  <button onClick={onClick} className="group text-left w-full">
    <div className="relative overflow-hidden mb-4" style={{ aspectRatio: large ? '4/3' : '3/4' }}>
      {/* Layered gradient mood */}
      <div className="absolute inset-0" style={{
        background: `linear-gradient(135deg, ${project.palette[0]} 0%, ${project.palette[1]} 60%, ${project.palette[2] || project.palette[0]} 100%)`
      }} />
      {/* Architectural geometry overlay */}
      <svg className="absolute inset-0 w-full h-full opacity-40" preserveAspectRatio="xMidYMid slice" viewBox="0 0 400 300">
        <defs>
          <pattern id={`grid-${project.id}`} x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1F1B17" strokeWidth="0.3" />
          </pattern>
        </defs>
        <rect width="400" height="300" fill={`url(#grid-${project.id})`} />
        <rect x="60" y="80" width="120" height="180" fill="none" stroke="#1F1B17" strokeWidth="0.6" opacity="0.5" />
        <rect x="200" y="120" width="160" height="140" fill="none" stroke="#1F1B17" strokeWidth="0.6" opacity="0.5" />
        <line x1="60" y1="80" x2="360" y2="80" stroke="#1F1B17" strokeWidth="0.4" opacity="0.4" />
      </svg>
      {/* Project number */}
      <div className="absolute top-5 left-5 font-fraunces italic text-[#1F1B17] text-[13px]">
        — 0{project.id}
      </div>
      <div className="absolute top-5 right-5 font-dm text-[11px] tracking-wider text-[#1F1B17]/80">
        {project.year}
      </div>
      {/* Hover overlay */}
      <div className="absolute inset-0 bg-[#1F1B17]/0 group-hover:bg-[#1F1B17]/20 transition-all duration-500 flex items-center justify-center">
        <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-500">
          <div className="w-12 h-12 rounded-full bg-[#F4EEE3] flex items-center justify-center">
            <ArrowUpRight size={20} className="text-[#1F1B17]" />
          </div>
        </div>
      </div>
    </div>
    <div className="flex items-baseline justify-between gap-4">
      <h3 className="font-fraunces text-[22px] md:text-[26px] text-[#1F1B17] leading-none">
        {project.name}
      </h3>
      <span className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C] flex-shrink-0">
        {project.location}
      </span>
    </div>
    <p className="font-dm text-[13px] text-[#756A5C] mt-1.5">{project.type} · {project.area}</p>
  </button>
);

// ============================================================
// HOME
// ============================================================
const Home = ({ setPage, setSelectedProject }) => {
  const featured = PROJECTS.slice(0, 4);
  return (
    <main className="pt-24">
      {/* HERO */}
      <section className="max-w-[1600px] mx-auto px-6 md:px-10 pt-12 md:pt-24 pb-20 md:pb-32">
        <div className="grid md:grid-cols-12 gap-8">
          <div className="md:col-span-2 hidden md:block">
            <div className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C] writing-mode-vertical">
              Est. 2026 — Fortaleza
            </div>
          </div>
          <div className="md:col-span-10">
            <p className="font-fraunces italic text-[#B8893B] text-[15px] mb-8 tracking-wide">
              — {STUDIO.tagline}
            </p>
            <h1 className="font-fraunces text-[#1F1B17] text-[44px] md:text-[88px] lg:text-[112px] leading-[0.95] tracking-tight font-light">
              Espaços que <em className="font-fraunces italic text-[#B8893B]">respiram</em><br />
              o Brasil que <em className="font-fraunces italic">você</em> ama.
            </h1>
            <div className="grid md:grid-cols-12 gap-8 mt-16">
              <div className="md:col-span-5 md:col-start-7">
                <p className="font-dm text-[16px] md:text-[18px] text-[#1F1B17] leading-relaxed">
                  CasAmarela é um estúdio de arquitetura que projeta com vagar.
                  Casas, comércios e reformas pensadas a partir do clima, da rotina
                  e dos afetos de quem vai morar.
                </p>
                <div className="flex flex-wrap gap-4 mt-8">
                  <button onClick={() => setPage('briefing')}
                    className="group inline-flex items-center gap-2 bg-[#1F1B17] text-[#F4EEE3] px-7 py-4 rounded-full font-dm text-[14px] tracking-wide hover:bg-[#B8893B] transition-colors">
                    Iniciar um projeto
                    <ArrowUpRight size={16} className="group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
                  </button>
                  <button onClick={() => setPage('projects')}
                    className="inline-flex items-center gap-2 px-7 py-4 rounded-full font-dm text-[14px] tracking-wide text-[#1F1B17] border border-[#1F1B17]/20 hover:border-[#1F1B17] transition-colors">
                    Ver projetos
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MANIFESTO STRIP */}
      <section className="border-y border-[#1F1B17]/10 bg-[#EBE3D2]">
        <div className="max-w-[1600px] mx-auto px-6 md:px-10 py-20 md:py-28">
          <div className="grid md:grid-cols-12 gap-8 items-end">
            <div className="md:col-span-3">
              <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C] mb-4">
                — Manifesto
              </p>
            </div>
            <div className="md:col-span-9">
              <p className="font-fraunces text-[28px] md:text-[42px] lg:text-[52px] text-[#1F1B17] leading-[1.1] font-light tracking-tight">
                Acreditamos em arquitetura que <em className="italic">não grita</em>.
                Que envelhece com o lugar. Que cabe na vida real e
                <em className="italic text-[#B8893B]"> ainda assim</em> emociona.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED PROJECTS */}
      <section className="max-w-[1600px] mx-auto px-6 md:px-10 py-20 md:py-28">
        <div className="flex items-end justify-between mb-12 md:mb-16">
          <div>
            <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C] mb-3">— Trabalho recente</p>
            <h2 className="font-fraunces text-[#1F1B17] text-[36px] md:text-[56px] leading-none tracking-tight font-light">
              Projetos <em className="italic text-[#B8893B]">selecionados</em>
            </h2>
          </div>
          <button onClick={() => setPage('projects')}
            className="hidden md:inline-flex font-dm text-[13px] tracking-wide text-[#1F1B17] items-center gap-2 group">
            Ver todos
            <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
          </button>
        </div>
        <div className="grid md:grid-cols-2 gap-x-8 gap-y-16">
          {featured.map((p, i) => (
            <div key={p.id} className={i % 2 === 1 ? 'md:mt-24' : ''}>
              <ProjectTile project={p} large onClick={() => { setSelectedProject(p); setPage('projects'); }} />
            </div>
          ))}
        </div>
      </section>

      {/* PROCESS */}
      <section className="border-t border-[#1F1B17]/10">
        <div className="max-w-[1600px] mx-auto px-6 md:px-10 py-20 md:py-28">
          <div className="grid md:grid-cols-12 gap-12">
            <div className="md:col-span-4">
              <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C] mb-4">— Como trabalhamos</p>
              <h2 className="font-fraunces text-[#1F1B17] text-[40px] md:text-[52px] leading-[1] tracking-tight font-light">
                Quatro <em className="italic text-[#B8893B]">tempos</em>.
              </h2>
              <p className="font-dm text-[15px] text-[#756A5C] mt-6 leading-relaxed">
                Cada projeto começa com escuta e termina com entrega. No meio,
                desenho, conversa e desenho de novo.
              </p>
            </div>
            <div className="md:col-span-8 grid sm:grid-cols-2 gap-x-10 gap-y-12">
              {[
                ['01', 'Briefing', 'Conversa inicial. Entendimento do site, das pessoas e do que importa de fato.'],
                ['02', 'Estudo Preliminar', 'Primeiras propostas espaciais. Volumes, fluxos e a alma do projeto.'],
                ['03', 'Projeto Executivo', 'Detalhamento completo: arquitetura, complementares, marcenaria e iluminação.'],
                ['04', 'Acompanhamento', 'Presença em obra para que o projeto chegue inteiro à entrega final.'],
              ].map(([n, t, d]) => (
                <div key={n} className="border-t border-[#1F1B17]/15 pt-5">
                  <span className="font-fraunces italic text-[#B8893B] text-[14px]">{n}</span>
                  <h3 className="font-fraunces text-[26px] text-[#1F1B17] mt-1.5 mb-3">{t}</h3>
                  <p className="font-dm text-[14px] text-[#756A5C] leading-relaxed">{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-[#1F1B17] text-[#F4EEE3]">
        <div className="max-w-[1600px] mx-auto px-6 md:px-10 py-24 md:py-32">
          <div className="grid md:grid-cols-12 gap-8 items-center">
            <div className="md:col-span-8">
              <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#B8893B] mb-4">— Próximo passo</p>
              <h2 className="font-fraunces text-[40px] md:text-[64px] lg:text-[80px] leading-[0.95] tracking-tight font-light">
                Tem um projeto <em className="italic text-[#B8893B]">em mente</em>?
              </h2>
              <p className="font-dm text-[16px] text-[#F4EEE3]/70 mt-6 max-w-lg leading-relaxed">
                O briefing leva cerca de 8 minutos. Em até 3 dias úteis você
                recebe um retorno com proposta inicial e próximos passos.
              </p>
            </div>
            <div className="md:col-span-4 md:text-right">
              <button onClick={() => setPage('briefing')}
                className="group inline-flex items-center gap-3 bg-[#B8893B] text-[#1F1B17] px-8 py-5 rounded-full font-dm text-[15px] tracking-wide hover:bg-[#F4EEE3] transition-colors">
                Preencher briefing
                <ArrowUpRight size={18} className="group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

// ============================================================
// PROJECTS PAGE
// ============================================================
const Projects = ({ selected, setSelected }) => {
  const [filter, setFilter] = useState('todos');
  const types = ['todos', ...new Set(PROJECTS.map(p => p.type.split(' · ')[0]))];
  const filtered = filter === 'todos' ? PROJECTS : PROJECTS.filter(p => p.type.startsWith(filter));

  if (selected) {
    return (
      <main className="pt-32 pb-20">
        <div className="max-w-[1600px] mx-auto px-6 md:px-10">
          <button onClick={() => setSelected(null)}
            className="font-dm text-[13px] text-[#756A5C] hover:text-[#1F1B17] flex items-center gap-2 mb-10">
            <ArrowLeft size={14} /> Voltar aos projetos
          </button>

          <div className="grid md:grid-cols-12 gap-8 mb-12">
            <div className="md:col-span-8">
              <p className="font-fraunces italic text-[#B8893B] text-[14px] mb-3">— Projeto 0{selected.id}</p>
              <h1 className="font-fraunces text-[#1F1B17] text-[56px] md:text-[96px] leading-[0.9] tracking-tight font-light">
                {selected.name}
              </h1>
            </div>
            <div className="md:col-span-4 md:pt-8">
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <p className="font-dm text-[10px] tracking-[0.2em] uppercase text-[#756A5C] mb-2">Local</p>
                  <p className="font-dm text-[14px] text-[#1F1B17]">{selected.location}</p>
                </div>
                <div>
                  <p className="font-dm text-[10px] tracking-[0.2em] uppercase text-[#756A5C] mb-2">Ano</p>
                  <p className="font-dm text-[14px] text-[#1F1B17]">{selected.year}</p>
                </div>
                <div>
                  <p className="font-dm text-[10px] tracking-[0.2em] uppercase text-[#756A5C] mb-2">Tipo</p>
                  <p className="font-dm text-[14px] text-[#1F1B17]">{selected.type}</p>
                </div>
                <div>
                  <p className="font-dm text-[10px] tracking-[0.2em] uppercase text-[#756A5C] mb-2">Área</p>
                  <p className="font-dm text-[14px] text-[#1F1B17]">{selected.area}</p>
                </div>
              </div>
            </div>
          </div>

          <div className="relative w-full mb-16" style={{ aspectRatio: '16/9' }}>
            <div className="absolute inset-0" style={{
              background: `linear-gradient(135deg, ${selected.palette[0]} 0%, ${selected.palette[1]} 60%, ${selected.palette[2] || selected.palette[0]} 100%)`
            }} />
            <svg className="absolute inset-0 w-full h-full opacity-30" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1600 900">
              <defs>
                <pattern id="bigGrid" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse">
                  <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#1F1B17" strokeWidth="0.5" />
                </pattern>
              </defs>
              <rect width="1600" height="900" fill="url(#bigGrid)" />
              <rect x="200" y="250" width="500" height="500" fill="none" stroke="#1F1B17" strokeWidth="1" opacity="0.5" />
              <rect x="800" y="350" width="600" height="400" fill="none" stroke="#1F1B17" strokeWidth="1" opacity="0.5" />
            </svg>
          </div>

          <div className="grid md:grid-cols-12 gap-8">
            <div className="md:col-span-3">
              <p className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C]">— Sobre o projeto</p>
            </div>
            <div className="md:col-span-7">
              <p className="font-fraunces text-[24px] md:text-[32px] text-[#1F1B17] leading-[1.3] font-light">
                {selected.description}
              </p>
            </div>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main className="pt-32 pb-20">
      <section className="max-w-[1600px] mx-auto px-6 md:px-10">
        <div className="grid md:grid-cols-12 gap-8 mb-16">
          <div className="md:col-span-2">
            <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C]">— Portfólio</p>
          </div>
          <div className="md:col-span-10">
            <h1 className="font-fraunces text-[#1F1B17] text-[56px] md:text-[112px] leading-[0.9] tracking-tight font-light">
              Trabalhos <em className="italic text-[#B8893B]">selecionados</em>
            </h1>
            <p className="font-dm text-[16px] md:text-[18px] text-[#756A5C] mt-6 max-w-2xl leading-relaxed">
              Uma seleção de residências, comércios e estudos conceituais
              desenvolvidos entre 2024 e 2026.
            </p>
          </div>
        </div>

        <div className="flex flex-wrap gap-2 mb-12 border-b border-[#1F1B17]/10 pb-6">
          {types.map(t => (
            <button key={t} onClick={() => setFilter(t)}
              className={`font-dm text-[13px] px-4 py-2 rounded-full transition-colors ${
                filter === t
                  ? 'bg-[#1F1B17] text-[#F4EEE3]'
                  : 'text-[#756A5C] hover:text-[#1F1B17]'
              }`}>
              {t.charAt(0).toUpperCase() + t.slice(1)}
            </button>
          ))}
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-14">
          {filtered.map(p => (
            <ProjectTile key={p.id} project={p} onClick={() => setSelected(p)} />
          ))}
        </div>
      </section>
    </main>
  );
};

// ============================================================
// STUDIO (ABOUT)
// ============================================================
const Studio = ({ setPage }) => (
  <main className="pt-32 pb-20">
    <section className="max-w-[1600px] mx-auto px-6 md:px-10">
      <div className="grid md:grid-cols-12 gap-8 mb-20">
        <div className="md:col-span-2">
          <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C]">— O Estúdio</p>
        </div>
        <div className="md:col-span-10">
          <h1 className="font-fraunces text-[#1F1B17] text-[44px] md:text-[88px] lg:text-[104px] leading-[0.95] tracking-tight font-light max-w-[14ch]">
            Uma casa <em className="italic text-[#B8893B]">amarela</em> no meio do Brasil.
          </h1>
        </div>
      </div>

      <div className="grid md:grid-cols-12 gap-8 mb-24">
        <div className="md:col-span-5 md:col-start-3">
          <p className="font-fraunces text-[22px] md:text-[26px] text-[#1F1B17] leading-[1.4] font-light italic">
            "O nome veio antes do estúdio. Sempre achei que casa devia ter cor —
            aquela cor que se vê de longe e já avisa que tem alguém esperando."
          </p>
          <p className="font-dm text-[12px] tracking-[0.2em] uppercase text-[#756A5C] mt-6">— Davi Porto, fundador</p>
        </div>
      </div>

      <div className="grid md:grid-cols-12 gap-8 mb-24 items-start">
        <div className="md:col-span-5">
          <div className="relative w-full" style={{ aspectRatio: '4/5' }}>
            <div className="absolute inset-0" style={{
              background: 'linear-gradient(135deg, #B8893B 0%, #8B6F4E 50%, #1F1B17 100%)'
            }} />
            <svg className="absolute inset-0 w-full h-full opacity-25" preserveAspectRatio="xMidYMid slice" viewBox="0 0 400 500">
              <defs>
                <pattern id="portraitGrid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#F4EEE3" strokeWidth="0.4" />
                </pattern>
              </defs>
              <rect width="400" height="500" fill="url(#portraitGrid)" />
            </svg>
            <div className="absolute bottom-6 left-6 right-6">
              <p className="font-fraunces italic text-[#F4EEE3] text-[14px]">— Davi Porto</p>
              <p className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#F4EEE3]/70 mt-1">Arquiteto · CAU {STUDIO.cau}</p>
            </div>
          </div>
        </div>
        <div className="md:col-span-6 md:col-start-7 md:pt-12">
          <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C] mb-5">— Quem assina</p>
          <h2 className="font-fraunces text-[40px] md:text-[52px] text-[#1F1B17] leading-[1] tracking-tight font-light mb-8">
            Davi Porto
          </h2>
          <div className="space-y-5 font-dm text-[15px] text-[#1F1B17] leading-[1.7]">
            <p>
              Arquiteto e urbanista formado pela <strong className="font-medium">UNINOVAFAPI</strong> em janeiro de 2026,
              com registro ativo no Conselho de Arquitetura e Urbanismo do Brasil sob o nº <strong className="font-medium">A325590-5</strong>.
            </p>
            <p>
              Filho de Raiane Lobão e Fhabricio Porto, nasceu cercado de afetos
              que ensinaram cedo o valor da casa como abrigo. Funda o CasAmarela
              em 2026 com o desejo de fazer arquitetura que parta sempre de uma
              pergunta simples: como quem mora aqui quer viver?
            </p>
            <p className="text-[#756A5C] italic font-fraunces text-[17px]">
              "Projeto não é fórmula. É escuta."
            </p>
          </div>
        </div>
      </div>

      {/* VALUES */}
      <div className="border-t border-[#1F1B17]/10 pt-20">
        <div className="grid md:grid-cols-12 gap-12 mb-16">
          <div className="md:col-span-4">
            <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C] mb-4">— Princípios</p>
            <h2 className="font-fraunces text-[40px] md:text-[52px] text-[#1F1B17] leading-[1] tracking-tight font-light">
              No que <em className="italic text-[#B8893B]">acreditamos</em>.
            </h2>
          </div>
        </div>
        <div className="grid md:grid-cols-3 gap-x-10 gap-y-14">
          {[
            ['Lugar', 'Cada projeto começa pelo terreno, pelo clima, pela rua. A arquitetura responde antes de propor.'],
            ['Tempo', 'Casas se fazem com vagar. Preferimos menos projetos por ano, com presença em cada decisão.'],
            ['Verdade', 'Materiais que envelhecem bem. Estruturas honestas. Detalhes que não escondem como foram feitos.'],
            ['Calor', 'Arquitetura brasileira não é estilo — é resposta ao sol, ao vento, à festa. Projetamos para isso.'],
            ['Detalhe', 'Uma maçaneta mal escolhida desfaz uma sala bem composta. Atenção do início ao fim.'],
            ['Diálogo', 'O cliente é coautor. O melhor projeto é aquele que o morador reconhece como dele desde o primeiro dia.'],
          ].map(([t, d]) => (
            <div key={t} className="border-t border-[#1F1B17]/15 pt-5">
              <h3 className="font-fraunces text-[28px] text-[#1F1B17] mb-3 italic">{t}</h3>
              <p className="font-dm text-[14px] text-[#756A5C] leading-[1.7]">{d}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="mt-24 flex justify-center">
        <button onClick={() => setPage('briefing')}
          className="group inline-flex items-center gap-2 bg-[#1F1B17] text-[#F4EEE3] px-8 py-5 rounded-full font-dm text-[14px] tracking-wide hover:bg-[#B8893B] transition-colors">
          Iniciar conversa
          <ArrowUpRight size={16} className="group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
        </button>
      </div>
    </section>
  </main>
);

// ============================================================
// BRIEFING — multi-step form
// ============================================================
const BRIEFING_STEPS = [
  {
    id: 'contato',
    title: 'Quem é você',
    subtitle: 'Para começarmos a conversa',
    fields: [
      { name: 'nome', label: 'Nome completo', type: 'text', required: true },
      { name: 'email', label: 'E-mail', type: 'email', required: true },
      { name: 'telefone', label: 'WhatsApp', type: 'tel', required: true, placeholder: '(85) 9 0000-0000' },
      { name: 'comoConheceu', label: 'Como nos encontrou?', type: 'select', options: ['Instagram', 'Indicação', 'Google', 'Pinterest', 'Outro'] },
    ],
  },
  {
    id: 'projeto',
    title: 'O projeto',
    subtitle: 'Que tipo de trabalho você imagina',
    fields: [
      { name: 'tipoProjeto', label: 'Tipo de projeto', type: 'radio',
        options: ['Residencial — nova construção', 'Residencial — reforma', 'Comercial', 'Design de interiores', 'Estudo / consultoria', 'Ainda não sei'] },
      { name: 'situacaoLocal', label: 'Situação atual', type: 'radio',
        options: ['Já tenho o terreno/imóvel', 'Estou procurando', 'Imóvel alugado', 'Apenas estudo inicial'] },
      { name: 'localizacao', label: 'Cidade e bairro', type: 'text', placeholder: 'Ex.: Aldeota, Fortaleza' },
    ],
  },
  {
    id: 'local',
    title: 'Sobre o local',
    subtitle: 'Mais detalhes do espaço',
    fields: [
      { name: 'metragem', label: 'Metragem aproximada (m²)', type: 'text', placeholder: 'Ex.: 250' },
      { name: 'caracteristicas', label: 'Características importantes do terreno/imóvel', type: 'textarea',
        placeholder: 'Vista, vizinhança, orientação solar, declive, árvores existentes, pavimentos...' },
      { name: 'levantamentoExistente', label: 'Você já tem documentação técnica?', type: 'multi',
        options: ['Planta baixa', 'Levantamento topográfico', 'Sondagem do solo', 'Matrícula', 'Nenhum dos anteriores'] },
    ],
  },
  {
    id: 'programa',
    title: 'Programa de necessidades',
    subtitle: 'Como o espaço será habitado',
    fields: [
      { name: 'usuarios', label: 'Quem irá usar o espaço?', type: 'textarea',
        placeholder: 'Ex.: casal, 2 filhos pequenos, 1 cachorro, recebem os pais nos fins de semana...' },
      { name: 'comodos', label: 'Cômodos / ambientes desejados', type: 'multi',
        options: ['Sala de estar', 'Sala de jantar', 'Sala de TV/íntima', 'Cozinha aberta', 'Cozinha fechada', 'Lavanderia',
          'Suíte master', 'Quartos secundários', 'Quarto de hóspedes', 'Home office', 'Closet', 'Lavabo',
          'Varanda gourmet', 'Piscina', 'Jardim', 'Garagem', 'Área de serviço', 'Quarto de empregada',
          'Espaço para hobby', 'Academia', 'Adega'] },
      { name: 'rotina', label: 'Como é o dia a dia?', type: 'textarea',
        placeholder: 'Ex.: trabalho de casa, cozinha todos os dias, recebe amigos no fim de semana, gosta de plantas...' },
    ],
  },
  {
    id: 'estilo',
    title: 'Estilo & inspiração',
    subtitle: 'O que toca seus olhos',
    fields: [
      { name: 'estilos', label: 'Estilos que conversam com você', type: 'multi',
        options: ['Brasileiro contemporâneo', 'Modernista (Niemeyer, Lina Bo Bardi)', 'Minimalista', 'Industrial', 'Rústico / orgânico',
          'Mid-century', 'Mediterrâneo', 'Tropical', 'Wabi-sabi', 'Maximalista colorido'] },
      { name: 'palavrasChave', label: '3 palavras que descrevem a casa dos seus sonhos', type: 'text',
        placeholder: 'Ex.: aberta, calma, brasileira' },
      { name: 'amaOdeia', label: 'O que você ama / detesta em arquitetura', type: 'textarea',
        placeholder: 'Materiais, cores, sensações, lembranças...' },
      { name: 'referencias', label: 'Tem links/fotos de referência?', type: 'textarea',
        placeholder: 'Cole aqui links de Pinterest, Instagram ou descreva referências' },
    ],
  },
  {
    id: 'investimento',
    title: 'Investimento & prazo',
    subtitle: 'Para alinharmos expectativas',
    fields: [
      { name: 'orcamento', label: 'Faixa de investimento (obra completa)', type: 'radio',
        options: ['Até R$ 200 mil', 'R$ 200 a 500 mil', 'R$ 500 mil a 1 milhão', 'R$ 1 a 3 milhões', 'Acima de R$ 3 milhões', 'Ainda em estudo'] },
      { name: 'prazoIdeal', label: 'Quando gostaria de começar?', type: 'radio',
        options: ['Imediatamente', 'Em até 3 meses', 'Em até 6 meses', 'Ainda este ano', 'Sem pressa definida'] },
      { name: 'consultouOutros', label: 'Já consultou outros profissionais?', type: 'radio',
        options: ['Sim, tenho propostas', 'Sim, mas sem proposta formal', 'Não, é o primeiro contato'] },
    ],
  },
  {
    id: 'final',
    title: 'Algo mais',
    subtitle: 'O que mais você gostaria de compartilhar',
    fields: [
      { name: 'mensagem', label: 'Mensagem livre', type: 'textarea',
        placeholder: 'Datas importantes, expectativas particulares, qualquer coisa que ajude o início do projeto...' },
    ],
  },
];

const Briefing = ({ setPage }) => {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [done, setDone] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  const current = BRIEFING_STEPS[step];
  const progress = ((step + 1) / BRIEFING_STEPS.length) * 100;

  const update = (name, value) => setData(d => ({ ...d, [name]: value }));
  const toggleMulti = (name, value) => {
    setData(d => {
      const cur = d[name] || [];
      return { ...d, [name]: cur.includes(value) ? cur.filter(v => v !== value) : [...cur, value] };
    });
  };

  const isValid = () => {
    return current.fields.every(f => {
      if (!f.required) return true;
      const v = data[f.name];
      return v && (typeof v === 'string' ? v.trim() : true);
    });
  };

  const handleNext = async () => {
    if (!isValid()) { setErrorMsg('Preencha os campos obrigatórios'); return; }
    setErrorMsg('');
    if (step < BRIEFING_STEPS.length - 1) {
      setStep(step + 1);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      setSubmitting(true);
      const result = await storage.saveBriefing(data);
      setSubmitting(false);
      if (result) setDone(true);
      else setErrorMsg('Não foi possível enviar. Tente novamente.');
    }
  };

  const handleBack = () => { if (step > 0) { setStep(step - 1); window.scrollTo({top:0,behavior:'smooth'}); } };

  if (done) {
    return (
      <main className="pt-32 pb-20 min-h-screen flex items-center">
        <section className="max-w-[1000px] mx-auto px-6 md:px-10 text-center">
          <p className="font-fraunces italic text-[#B8893B] text-[15px] mb-6">— Mensagem recebida</p>
          <h1 className="font-fraunces text-[#1F1B17] text-[48px] md:text-[88px] leading-[0.95] tracking-tight font-light mb-8">
            Obrigado, <em className="italic text-[#B8893B]">{(data.nome || '').split(' ')[0] || 'até logo'}</em>.
          </h1>
          <p className="font-dm text-[16px] md:text-[18px] text-[#756A5C] max-w-xl mx-auto leading-relaxed mb-12">
            Recebemos o seu briefing. Em até 3 dias úteis você terá um retorno
            do estúdio com primeiras impressões, perguntas e os próximos passos.
          </p>
          <button onClick={() => setPage('home')}
            className="font-dm text-[14px] text-[#1F1B17] underline decoration-[#B8893B] underline-offset-4 hover:text-[#B8893B]">
            Voltar ao início
          </button>
        </section>
      </main>
    );
  }

  return (
    <main className="pt-24 pb-20 min-h-screen">
      <div className="max-w-[1000px] mx-auto px-6 md:px-10">
        {/* Progress */}
        <div className="pt-8 mb-12">
          <div className="flex items-center justify-between mb-3">
            <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C]">
              Etapa {step + 1} de {BRIEFING_STEPS.length}
            </p>
            <p className="font-dm text-[11px] tracking-[0.25em] uppercase text-[#756A5C]">
              {Math.round(progress)}%
            </p>
          </div>
          <div className="h-px bg-[#1F1B17]/10 relative overflow-hidden">
            <div className="h-full bg-[#B8893B] transition-all duration-500"
              style={{ width: `${progress}%` }} />
          </div>
        </div>

        {/* Title */}
        <div className="mb-12">
          <p className="font-fraunces italic text-[#B8893B] text-[14px] mb-3">— {current.subtitle}</p>
          <h1 className="font-fraunces text-[#1F1B17] text-[40px] md:text-[64px] leading-[0.95] tracking-tight font-light">
            {current.title}
          </h1>
        </div>

        {/* Fields */}
        <div className="space-y-10">
          {current.fields.map(f => (
            <div key={f.name}>
              <label className="block font-dm text-[13px] text-[#1F1B17] mb-3">
                {f.label}{f.required && <span className="text-[#B8893B] ml-1">*</span>}
              </label>

              {f.type === 'text' || f.type === 'email' || f.type === 'tel' ? (
                <input type={f.type} value={data[f.name] || ''} onChange={e => update(f.name, e.target.value)}
                  placeholder={f.placeholder || ''}
                  className="w-full bg-transparent border-b border-[#1F1B17]/20 py-3 font-dm text-[16px] text-[#1F1B17] placeholder:text-[#756A5C]/60 focus:outline-none focus:border-[#B8893B] transition-colors" />
              ) : f.type === 'textarea' ? (
                <textarea value={data[f.name] || ''} onChange={e => update(f.name, e.target.value)}
                  placeholder={f.placeholder || ''} rows={4}
                  className="w-full bg-transparent border border-[#1F1B17]/15 rounded-lg p-4 font-dm text-[15px] text-[#1F1B17] placeholder:text-[#756A5C]/60 focus:outline-none focus:border-[#B8893B] transition-colors resize-none" />
              ) : f.type === 'select' ? (
                <select value={data[f.name] || ''} onChange={e => update(f.name, e.target.value)}
                  className="w-full bg-transparent border-b border-[#1F1B17]/20 py-3 font-dm text-[16px] text-[#1F1B17] focus:outline-none focus:border-[#B8893B]">
                  <option value="">Selecione...</option>
                  {f.options.map(o => <option key={o} value={o}>{o}</option>)}
                </select>
              ) : f.type === 'radio' ? (
                <div className="space-y-2">
                  {f.options.map(o => (
                    <button key={o} type="button" onClick={() => update(f.name, o)}
                      className={`w-full text-left px-5 py-3.5 rounded-lg border transition-all font-dm text-[14px] ${
                        data[f.name] === o
                          ? 'border-[#B8893B] bg-[#B8893B]/8 text-[#1F1B17]'
                          : 'border-[#1F1B17]/15 text-[#756A5C] hover:border-[#1F1B17]/40 hover:text-[#1F1B17]'
                      }`}>
                      <span className="flex items-center gap-3">
                        <span className={`w-4 h-4 rounded-full border-2 flex-shrink-0 transition-all ${
                          data[f.name] === o ? 'border-[#B8893B] bg-[#B8893B]' : 'border-[#1F1B17]/30'
                        }`} />
                        {o}
                      </span>
                    </button>
                  ))}
                </div>
              ) : f.type === 'multi' ? (
                <div className="flex flex-wrap gap-2">
                  {f.options.map(o => {
                    const selected = (data[f.name] || []).includes(o);
                    return (
                      <button key={o} type="button" onClick={() => toggleMulti(f.name, o)}
                        className={`px-4 py-2.5 rounded-full font-dm text-[13px] border transition-all ${
                          selected
                            ? 'bg-[#1F1B17] text-[#F4EEE3] border-[#1F1B17]'
                            : 'border-[#1F1B17]/20 text-[#756A5C] hover:border-[#1F1B17] hover:text-[#1F1B17]'
                        }`}>
                        {selected && <Check size={12} className="inline mr-1.5 -mt-0.5" />}
                        {o}
                      </button>
                    );
                  })}
                </div>
              ) : null}
            </div>
          ))}
        </div>

        {errorMsg && (
          <p className="mt-6 font-dm text-[13px] text-[#A35C3A]">{errorMsg}</p>
        )}

        {/* Navigation */}
        <div className="mt-16 pt-8 border-t border-[#1F1B17]/10 flex items-center justify-between">
          <button onClick={handleBack} disabled={step === 0}
            className="font-dm text-[14px] text-[#756A5C] hover:text-[#1F1B17] disabled:opacity-0 transition-opacity flex items-center gap-2">
            <ArrowLeft size={14} /> Voltar
          </button>
          <button onClick={handleNext} disabled={submitting}
            className="group inline-flex items-center gap-2 bg-[#1F1B17] text-[#F4EEE3] px-7 py-4 rounded-full font-dm text-[14px] tracking-wide hover:bg-[#B8893B] transition-colors disabled:opacity-50">
            {submitting ? 'Enviando...' : step === BRIEFING_STEPS.length - 1 ? 'Enviar briefing' : 'Continuar'}
            <ArrowRight size={14} className="group-hover:translate-x-0.5 transition-transform" />
          </button>
        </div>
      </div>
    </main>
  );
};

// ============================================================
// LOGIN
// ============================================================
const Login = ({ onSuccess, setPage }) => {
  const [pwd, setPwd] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    const stored = await storage.getPassword();
    setLoading(false);
    if (pwd === stored) onSuccess();
    else setError('Senha incorreta');
  };

  return (
    <main className="pt-32 pb-20 min-h-screen flex items-center">
      <div className="max-w-[480px] mx-auto px-6 md:px-10 w-full">
        <p className="font-fraunces italic text-[#B8893B] text-[14px] mb-3 text-center">— Acesso restrito</p>
        <h1 className="font-fraunces text-[#1F1B17] text-[42px] md:text-[56px] leading-[0.95] tracking-tight font-light text-center mb-12">
          Painel <em className="italic">interno</em>
        </h1>
        <div className="space-y-6">
          <div>
            <label className="block font-dm text-[12px] text-[#756A5C] mb-3 tracking-wide">Senha</label>
            <input type="password" value={pwd} onChange={e => setPwd(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && handleSubmit()}
              className="w-full bg-transparent border-b border-[#1F1B17]/20 py-3 font-dm text-[16px] text-[#1F1B17] focus:outline-none focus:border-[#B8893B] transition-colors" />
          </div>
          {error && <p className="font-dm text-[13px] text-[#A35C3A]">{error}</p>}
          <button onClick={handleSubmit} disabled={loading}
            className="w-full bg-[#1F1B17] text-[#F4EEE3] px-7 py-4 rounded-full font-dm text-[14px] tracking-wide hover:bg-[#B8893B] transition-colors disabled:opacity-50">
            {loading ? 'Verificando...' : 'Entrar'}
          </button>
          <p className="font-dm text-[12px] text-[#756A5C] text-center pt-4">
            Senha padrão: <span className="text-[#1F1B17] font-medium">{ADMIN_PASSWORD_DEFAULT}</span>
          </p>
        </div>
      </div>
    </main>
  );
};

// ============================================================
// DASHBOARD
// ============================================================
const Dashboard = ({ onLogout }) => {
  const [briefings, setBriefings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selected, setSelected] = useState(null);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('todos');
  const [showSettings, setShowSettings] = useState(false);

  const load = async () => {
    setLoading(true);
    const list = await storage.getAllBriefings();
    setBriefings(list);
    setLoading(false);
  };
  useEffect(() => { load(); }, []);

  const filtered = useMemo(() => {
    return briefings.filter(b => {
      if (statusFilter !== 'todos' && b.status !== statusFilter) return false;
      if (search) {
        const q = search.toLowerCase();
        return (b.nome || '').toLowerCase().includes(q) ||
               (b.email || '').toLowerCase().includes(q) ||
               (b.localizacao || '').toLowerCase().includes(q);
      }
      return true;
    });
  }, [briefings, search, statusFilter]);

  const stats = useMemo(() => ({
    total: briefings.length,
    leads: briefings.filter(b => b.status === 'lead').length,
    proposta: briefings.filter(b => b.status === 'proposta').length,
    fechado: briefings.filter(b => b.status === 'fechado').length,
  }), [briefings]);

  const handleStatusChange = async (id, newStatus) => {
    await storage.updateBriefing(id, { status: newStatus });
    if (selected && selected.id === id) setSelected({ ...selected, status: newStatus });
    load();
  };

  const handleNotesChange = async (id, notes) => {
    await storage.updateBriefing(id, { notes });
    if (selected && selected.id === id) setSelected({ ...selected, notes });
  };

  const handleDelete = async (id) => {
    if (!confirm('Excluir este briefing? Ação irreversível.')) return;
    await storage.deleteBriefing(id);
    setSelected(null);
    load();
  };

  const exportJSON = () => {
    const blob = new Blob([JSON.stringify(briefings, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = `briefings-${new Date().toISOString().slice(0, 10)}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  if (selected) return <BriefingDetail briefing={selected} onBack={() => setSelected(null)}
    onStatusChange={handleStatusChange} onNotesChange={handleNotesChange} onDelete={handleDelete} />;

  return (
    <main className="pt-24 pb-20 min-h-screen bg-[#F4EEE3]">
      <div className="max-w-[1600px] mx-auto px-6 md:px-10">
        {/* Header */}
        <div className="pt-8 pb-12 flex flex-col md:flex-row md:items-end md:justify-between gap-6 border-b border-[#1F1B17]/10">
          <div>
            <p className="font-fraunces italic text-[#B8893B] text-[14px] mb-2">— Painel interno</p>
            <h1 className="font-fraunces text-[#1F1B17] text-[48px] md:text-[64px] leading-[0.95] tracking-tight font-light">
              Bom dia, <em className="italic text-[#B8893B]">Davi</em>.
            </h1>
            <p className="font-dm text-[14px] text-[#756A5C] mt-2">
              Você tem {stats.total} {stats.total === 1 ? 'briefing recebido' : 'briefings recebidos'}.
            </p>
          </div>
          <div className="flex gap-2">
            <button onClick={exportJSON} className="font-dm text-[13px] text-[#1F1B17] border border-[#1F1B17]/15 hover:border-[#1F1B17] px-4 py-2.5 rounded-full flex items-center gap-2">
              <Download size={13} /> Exportar
            </button>
            <button onClick={() => setShowSettings(!showSettings)} className="font-dm text-[13px] text-[#1F1B17] border border-[#1F1B17]/15 hover:border-[#1F1B17] px-4 py-2.5 rounded-full">
              Configurações
            </button>
            <button onClick={onLogout} className="font-dm text-[13px] text-[#756A5C] hover:text-[#1F1B17] px-4 py-2.5 rounded-full flex items-center gap-2">
              <LogOut size={13} /> Sair
            </button>
          </div>
        </div>

        {showSettings && <SettingsPanel onClose={() => setShowSettings(false)} />}

        {/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 my-12">
          <StatCard icon={<FileText size={16} />} label="Total" value={stats.total} />
          <StatCard icon={<Users size={16} />} label="Novos leads" value={stats.leads} accent />
          <StatCard icon={<Clock size={16} />} label="Em proposta" value={stats.proposta} />
          <StatCard icon={<TrendingUp size={16} />} label="Fechados" value={stats.fechado} />
        </div>

        {/* Filters */}
        <div className="flex flex-col md:flex-row gap-4 mb-8">
          <div className="relative flex-1">
            <Search size={15} className="absolute left-4 top-1/2 -translate-y-1/2 text-[#756A5C]" />
            <input value={search} onChange={e => setSearch(e.target.value)}
              placeholder="Buscar por nome, email, localização..."
              className="w-full bg-white border border-[#1F1B17]/10 rounded-full pl-11 pr-5 py-3 font-dm text-[14px] text-[#1F1B17] placeholder:text-[#756A5C]/60 focus:outline-none focus:border-[#B8893B]" />
          </div>
          <div className="flex flex-wrap gap-2">
            <button onClick={() => setStatusFilter('todos')}
              className={`font-dm text-[12px] px-4 py-2 rounded-full transition-colors ${statusFilter === 'todos' ? 'bg-[#1F1B17] text-[#F4EEE3]' : 'bg-white border border-[#1F1B17]/10 text-[#756A5C] hover:text-[#1F1B17]'}`}>
              Todos
            </button>
            {STATUSES.map(s => (
              <button key={s.id} onClick={() => setStatusFilter(s.id)}
                className={`font-dm text-[12px] px-4 py-2 rounded-full transition-colors flex items-center gap-1.5 ${statusFilter === s.id ? 'text-[#F4EEE3]' : 'bg-white border border-[#1F1B17]/10 text-[#756A5C] hover:text-[#1F1B17]'}`}
                style={statusFilter === s.id ? { backgroundColor: s.color } : {}}>
                {s.label}
              </button>
            ))}
          </div>
        </div>

        {/* List */}
        {loading ? (
          <div className="text-center py-20 font-dm text-[14px] text-[#756A5C]">Carregando...</div>
        ) : filtered.length === 0 ? (
          <div className="text-center py-20">
            <p className="font-fraunces italic text-[#756A5C] text-[20px] mb-2">Nada por aqui ainda.</p>
            <p className="font-dm text-[13px] text-[#756A5C]">
              {briefings.length === 0 ? 'Quando alguém preencher o briefing, aparecerá aqui.' : 'Nenhum briefing corresponde ao filtro.'}
            </p>
          </div>
        ) : (
          <div className="space-y-3">
            {filtered.map(b => <BriefingRow key={b.id} briefing={b} onClick={() => setSelected(b)} onStatusChange={handleStatusChange} />)}
          </div>
        )}
      </div>
    </main>
  );
};

const StatCard = ({ icon, label, value, accent }) => (
  <div className={`rounded-2xl p-5 ${accent ? 'bg-[#1F1B17] text-[#F4EEE3]' : 'bg-white border border-[#1F1B17]/8'}`}>
    <div className={`flex items-center gap-2 mb-3 ${accent ? 'text-[#B8893B]' : 'text-[#756A5C]'}`}>
      {icon}
      <span className="font-dm text-[11px] tracking-[0.2em] uppercase">{label}</span>
    </div>
    <p className={`font-fraunces text-[40px] leading-none ${accent ? 'text-[#F4EEE3]' : 'text-[#1F1B17]'}`}>{value}</p>
  </div>
);

const BriefingRow = ({ briefing, onClick, onStatusChange }) => {
  const status = STATUSES.find(s => s.id === briefing.status) || STATUSES[0];
  const date = new Date(briefing.createdAt).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' });
  return (
    <div className="bg-white border border-[#1F1B17]/8 rounded-2xl p-5 md:p-6 hover:border-[#1F1B17]/20 transition-colors">
      <div className="flex flex-col md:flex-row md:items-center gap-4">
        <button onClick={onClick} className="flex-1 text-left min-w-0">
          <div className="flex items-baseline gap-3 mb-1">
            <h3 className="font-fraunces text-[22px] text-[#1F1B17] truncate">{briefing.nome || 'Sem nome'}</h3>
            <span className="font-dm text-[11px] text-[#756A5C] flex-shrink-0">{date}</span>
          </div>
          <div className="flex flex-wrap gap-x-4 gap-y-1 font-dm text-[13px] text-[#756A5C]">
            {briefing.email && <span className="flex items-center gap-1.5"><Mail size={12} />{briefing.email}</span>}
            {briefing.telefone && <span className="flex items-center gap-1.5"><Phone size={12} />{briefing.telefone}</span>}
            {briefing.localizacao && <span className="flex items-center gap-1.5"><MapPin size={12} />{briefing.localizacao}</span>}
          </div>
          {briefing.tipoProjeto && (
            <p className="font-dm text-[12px] text-[#1F1B17] mt-2 italic">{briefing.tipoProjeto}</p>
          )}
        </button>
        <div className="flex items-center gap-2 flex-shrink-0">
          <select value={briefing.status} onChange={e => { e.stopPropagation(); onStatusChange(briefing.id, e.target.value); }}
            className="font-dm text-[12px] rounded-full px-3 py-1.5 border-2 cursor-pointer focus:outline-none"
            style={{ borderColor: status.color, color: status.color, backgroundColor: 'transparent' }}>
            {STATUSES.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
          </select>
          <button onClick={onClick} className="text-[#756A5C] hover:text-[#1F1B17] p-2 rounded-full hover:bg-[#F4EEE3]">
            <Eye size={16} />
          </button>
        </div>
      </div>
    </div>
  );
};

const BriefingDetail = ({ briefing, onBack, onStatusChange, onNotesChange, onDelete }) => {
  const [notes, setNotes] = useState(briefing.notes || '');
  const [savedNotes, setSavedNotes] = useState(briefing.notes || '');
  const status = STATUSES.find(s => s.id === briefing.status) || STATUSES[0];

  useEffect(() => {
    if (notes === savedNotes) return;
    const t = setTimeout(() => { onNotesChange(briefing.id, notes); setSavedNotes(notes); }, 800);
    return () => clearTimeout(t);
  }, [notes]);

  const sections = [
    { title: 'Contato', fields: [
      ['Nome', briefing.nome], ['E-mail', briefing.email],
      ['WhatsApp', briefing.telefone], ['Como conheceu', briefing.comoConheceu],
    ]},
    { title: 'Projeto', fields: [
      ['Tipo', briefing.tipoProjeto], ['Situação', briefing.situacaoLocal],
      ['Localização', briefing.localizacao],
    ]},
    { title: 'Local', fields: [
      ['Metragem', briefing.metragem ? `${briefing.metragem} m²` : null],
      ['Características', briefing.caracteristicas],
      ['Documentação', Array.isArray(briefing.levantamentoExistente) ? briefing.levantamentoExistente.join(', ') : null],
    ]},
    { title: 'Programa', fields: [
      ['Usuários', briefing.usuarios],
      ['Cômodos desejados', Array.isArray(briefing.comodos) ? briefing.comodos.join(', ') : null],
      ['Rotina', briefing.rotina],
    ]},
    { title: 'Estilo', fields: [
      ['Estilos', Array.isArray(briefing.estilos) ? briefing.estilos.join(', ') : null],
      ['Palavras-chave', briefing.palavrasChave],
      ['O que ama / detesta', briefing.amaOdeia],
      ['Referências', briefing.referencias],
    ]},
    { title: 'Investimento', fields: [
      ['Faixa de orçamento', briefing.orcamento],
      ['Prazo ideal', briefing.prazoIdeal],
      ['Outros profissionais', briefing.consultouOutros],
    ]},
    { title: 'Mensagem', fields: [['Texto livre', briefing.mensagem]]},
  ];

  return (
    <main className="pt-24 pb-20 min-h-screen bg-[#F4EEE3]">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10 pt-8">
        <button onClick={onBack} className="font-dm text-[13px] text-[#756A5C] hover:text-[#1F1B17] flex items-center gap-2 mb-8">
          <ArrowLeft size={14} /> Voltar ao painel
        </button>

        <div className="grid lg:grid-cols-12 gap-8">
          {/* Main */}
          <div className="lg:col-span-8">
            <div className="flex flex-wrap items-baseline justify-between gap-4 pb-6 border-b border-[#1F1B17]/10 mb-8">
              <div>
                <p className="font-fraunces italic text-[#B8893B] text-[13px] mb-1">— Briefing recebido</p>
                <h1 className="font-fraunces text-[44px] md:text-[64px] leading-[0.95] tracking-tight font-light text-[#1F1B17]">
                  {briefing.nome}
                </h1>
                <p className="font-dm text-[13px] text-[#756A5C] mt-2">
                  Recebido em {new Date(briefing.createdAt).toLocaleString('pt-BR')}
                </p>
              </div>
              <button onClick={() => onDelete(briefing.id)} className="text-[#A35C3A] hover:bg-[#A35C3A]/10 p-2 rounded-full">
                <Trash2 size={16} />
              </button>
            </div>

            <div className="space-y-12">
              {sections.map(s => {
                const valid = s.fields.filter(f => f[1]);
                if (valid.length === 0) return null;
                return (
                  <div key={s.title}>
                    <h2 className="font-fraunces text-[26px] italic text-[#1F1B17] mb-5">{s.title}</h2>
                    <div className="space-y-5">
                      {valid.map(([label, value]) => (
                        <div key={label}>
                          <p className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C] mb-1.5">{label}</p>
                          <p className="font-dm text-[15px] text-[#1F1B17] leading-relaxed whitespace-pre-wrap">{value}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-4">
            <div className="lg:sticky lg:top-28 space-y-6">
              <div className="bg-white border border-[#1F1B17]/8 rounded-2xl p-6">
                <p className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C] mb-3">Status</p>
                <div className="grid grid-cols-2 gap-2">
                  {STATUSES.map(s => (
                    <button key={s.id} onClick={() => onStatusChange(briefing.id, s.id)}
                      className={`font-dm text-[12px] px-3 py-2 rounded-full border-2 transition-all`}
                      style={{
                        borderColor: s.color,
                        backgroundColor: briefing.status === s.id ? s.color : 'transparent',
                        color: briefing.status === s.id ? '#fff' : s.color,
                      }}>
                      {s.label}
                    </button>
                  ))}
                </div>
              </div>

              <div className="bg-white border border-[#1F1B17]/8 rounded-2xl p-6">
                <p className="font-dm text-[11px] tracking-[0.2em] uppercase text-[#756A5C] mb-3">Anotações privadas</p>
                <textarea value={notes} onChange={e => setNotes(e.target.value)}
                  placeholder="Suas anotações sobre este lead..." rows={6}
                  className="w-full bg-transparent border border-[#1F1B17]/10 rounded-lg p-3 font-dm text-[13px] text-[#1F1B17] focus:outline-none focus:border-[#B8893B] resize-none" />
                <p className="font-dm text-[11px] text-[#756A5C] mt-2 italic">
                  {notes !== savedNotes ? 'Salvando...' : 'Salvo automaticamente'}
                </p>
              </div>

              {briefing.email && (
                <a href={`mailto:${briefing.email}`}
                  className="block bg-[#1F1B17] text-[#F4EEE3] rounded-full px-6 py-4 font-dm text-[13px] tracking-wide text-center hover:bg-[#B8893B] transition-colors">
                  Responder por e-mail
                </a>
              )}
              {briefing.telefone && (
                <a href={`https://wa.me/${briefing.telefone.replace(/\D/g, '')}`} target="_blank" rel="noreferrer"
                  className="block border border-[#1F1B17]/20 hover:border-[#1F1B17] text-[#1F1B17] rounded-full px-6 py-4 font-dm text-[13px] tracking-wide text-center transition-colors">
                  Abrir WhatsApp
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
    </main>
  );
};

const SettingsPanel = ({ onClose }) => {
  const [newPwd, setNewPwd] = useState('');
  const [confirmPwd, setConfirmPwd] = useState('');
  const [msg, setMsg] = useState('');

  const handleSave = async () => {
    if (newPwd.length < 6) { setMsg('Mínimo 6 caracteres'); return; }
    if (newPwd !== confirmPwd) { setMsg('Senhas não coincidem'); return; }
    await storage.setPassword(newPwd);
    setMsg('Senha atualizada ✓');
    setNewPwd(''); setConfirmPwd('');
    setTimeout(() => setMsg(''), 2000);
  };

  return (
    <div className="bg-white border border-[#1F1B17]/8 rounded-2xl p-6 mt-8">
      <div className="flex items-center justify-between mb-5">
        <h3 className="font-fraunces text-[20px] italic text-[#1F1B17]">Alterar senha do painel</h3>
        <button onClick={onClose} className="text-[#756A5C] hover:text-[#1F1B17]"><X size={18} /></button>
      </div>
      <div className="grid md:grid-cols-2 gap-4 max-w-xl">
        <input type="password" value={newPwd} onChange={e => setNewPwd(e.target.value)} placeholder="Nova senha"
          className="bg-transparent border border-[#1F1B17]/15 rounded-lg px-4 py-3 font-dm text-[14px] focus:outline-none focus:border-[#B8893B]" />
        <input type="password" value={confirmPwd} onChange={e => setConfirmPwd(e.target.value)} placeholder="Confirmar"
          className="bg-transparent border border-[#1F1B17]/15 rounded-lg px-4 py-3 font-dm text-[14px] focus:outline-none focus:border-[#B8893B]" />
      </div>
      <div className="flex items-center gap-4 mt-4">
        <button onClick={handleSave} className="bg-[#1F1B17] text-[#F4EEE3] px-5 py-2.5 rounded-full font-dm text-[13px] hover:bg-[#B8893B]">
          Salvar
        </button>
        {msg && <p className="font-dm text-[13px] text-[#4A6B47]">{msg}</p>}
      </div>
    </div>
  );
};

// ============================================================
// MAIN APP
// ============================================================
export default function App() {
  useGoogleFonts();
  const [page, setPage] = useState('home');
  const [selectedProject, setSelectedProject] = useState(null);
  const [adminAuthed, setAdminAuthed] = useState(false);

  return (
    <div className="min-h-screen bg-[#F4EEE3]">
      <style>{`
        .font-fraunces { font-family: 'Fraunces', Georgia, serif; font-feature-settings: "ss01", "ss02"; }
        .font-dm { font-family: 'DM Sans', system-ui, sans-serif; }
        body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        em { font-style: italic; }
        .writing-mode-vertical { writing-mode: vertical-rl; transform: rotate(180deg); }
        select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23756A5C' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; appearance: none; padding-right: 1.5rem; }
        ::selection { background: #B8893B; color: #F4EEE3; }
      `}</style>

      <Header page={page} setPage={setPage} adminAuthed={adminAuthed} />

      {page === 'home' && <Home setPage={setPage} setSelectedProject={setSelectedProject} />}
      {page === 'projects' && <Projects selected={selectedProject} setSelected={setSelectedProject} />}
      {page === 'studio' && <Studio setPage={setPage} />}
      {page === 'briefing' && <Briefing setPage={setPage} />}
      {page === 'login' && !adminAuthed && <Login onSuccess={() => { setAdminAuthed(true); setPage('dashboard'); }} setPage={setPage} />}
      {page === 'dashboard' && adminAuthed && <Dashboard onLogout={() => { setAdminAuthed(false); setPage('home'); }} />}
      {page === 'dashboard' && !adminAuthed && <Login onSuccess={() => setAdminAuthed(true)} setPage={setPage} />}

      <Footer setPage={setPage} />
    </div>
  );
}