// Shared UI components and SVG placeholders for Think Architecture
const { useState, useEffect, useRef } = React;

const PARTNERS = [
{ name: 'Ballay Architecte', src: 'assets/partners/ballay-architecte.png' },
{ name: 'MAF — Mutuelle des Architectes Français', src: 'assets/partners/ordre-architectes-2.png' },
{ name: 'Ordre des Architectes', src: 'assets/partners/ordre-architectes-logo.png' },
{ name: 'Groupe Qualiconsult', src: 'assets/partners/qualiconsult.png' },
{ name: 'GES Études Structures', src: 'assets/partners/ges.png' },
{ name: 'GT Structures', src: 'assets/partners/gt-structures.png' },
{ name: 'Edifis Études Structures', src: 'assets/partners/edifis.png' },
{ name: 'Evally Promotion', src: 'assets/partners/evally-promotion.png' },
{ name: 'Matthieu Husser Architectures', src: 'assets/partners/mha-husser.png' },
{ name: 'Avenir Investissement', src: 'assets/partners/avenir-investissement.png', dark: true },
{ name: 'Bois Conseil', src: 'assets/partners/bois-conseil.png' },
{ name: 'Bureau Veritas', src: 'assets/partners/bureau-veritas.png' },
{ name: 'Énergies et Fluides', src: 'assets/partners/energies-et-fluides.png' },
{ name: 'Globeco', src: 'assets/partners/globeco.png' },
{ name: 'Société Régionale de Coordination', src: 'assets/partners/src.png' },
{ name: '3D Ingénierie', src: 'assets/partners/3d-ingenierie.png' },
{ name: 'BAC', src: 'assets/partners/alpes-controles-bac.png' },
{ name: 'Sud-Est Prévention', src: 'assets/partners/sud-est-prevention.png' }];


// === ICONS ===
function ArrowNE({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M7 17 L17 7" />
      <path d="M9 7 L17 7 L17 15" />
    </svg>);

}

function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M5 12 L19 12" />
      <path d="M13 6 L19 12 L13 18" />
    </svg>);

}

function ArrowLeft({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M19 12 L5 12" />
      <path d="M11 6 L5 12 L11 18" />
    </svg>);

}

function PlayIcon({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M6 4 L20 12 L6 20 Z" />
    </svg>);

}

// === Architectural SVG placeholder ===
// Generates a procedural architectural illustration based on a seed string.
// Each "image" is unique-looking but stays in our palette.
function ArchPlaceholder({ seed = 'a', label = '', tone = 'warm' }) {
  // Deterministic pseudo-random from seed
  const hash = Array.from(seed).reduce((a, c) => a + c.charCodeAt(0), 0);
  const rand = (i) => {
    const x = Math.sin(hash + i * 9301 + 49297) * 233280;
    return x - Math.floor(x);
  };

  // Palette options
  const palettes = {
    warm: { sky: '#d4c5b8', ground: '#3c240f', mid: '#7a4a2b', accent: '#da734a', light: '#e4dcd5' },
    cool: { sky: '#b8b8b8', ground: '#2a2a2a', mid: '#5a5a5a', accent: '#da734a', light: '#d8d8d8' },
    forest: { sky: '#c4ccc0', ground: '#2a3528', mid: '#4a5840', accent: '#da734a', light: '#dde0d4' },
    snow: { sky: '#dde2e6', ground: '#a0a8b0', mid: '#c4ccd2', accent: '#da734a', light: '#eef0f2' },
    dusk: { sky: '#c4a890', ground: '#3a2418', mid: '#7a4a2b', accent: '#da734a', light: '#dccebd' }
  };
  const p = palettes[tone] || palettes.warm;

  // Pick a composition type from seed
  const compositionType = Math.floor(rand(1) * 5);

  return (
    <svg width="100%" height="100%" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice"
    style={{ display: 'block', background: p.sky }}>
      <defs>
        <linearGradient id={`sky-${seed}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.sky} stopOpacity="1" />
          <stop offset="100%" stopColor={p.light} stopOpacity="1" />
        </linearGradient>
        <pattern id={`wood-${seed}`} width="6" height="60" patternUnits="userSpaceOnUse">
          <rect width="6" height="60" fill={p.mid} />
          <line x1="0" y1="0" x2="0" y2="60" stroke={p.ground} strokeWidth="0.5" opacity="0.4" />
          <line x1="3" y1="0" x2="3" y2="60" stroke={p.ground} strokeWidth="0.3" opacity="0.3" />
        </pattern>
        <pattern id={`vgrid-${seed}`} width="10" height="40" patternUnits="userSpaceOnUse">
          <rect width="10" height="40" fill={p.mid} />
          <line x1="5" y1="0" x2="5" y2="40" stroke={p.ground} strokeWidth="0.4" opacity="0.5" />
        </pattern>
      </defs>

      <rect width="800" height="600" fill={`url(#sky-${seed})`} />

      {compositionType === 0 &&
      // Modern cabin / wooden building
      <g>
          <rect x="0" y="440" width="800" height="160" fill={p.light} opacity="0.5" />
          <rect x={100 + rand(2) * 60} y={220 + rand(3) * 40} width={500 + rand(4) * 100} height={280}
        fill={`url(#wood-${seed})`} />
          <rect x={120} y={300} width={80} height={140} fill={p.ground} opacity="0.7" />
          <rect x={400} y={280} width={120} height={160} fill={p.ground} opacity="0.7" />
          <rect x={580} y={320} width={60} height={120} fill={p.ground} opacity="0.7" />
          {/* Roof line */}
          <polygon points={`${90 + rand(2) * 60},${220 + rand(3) * 40} ${610 + rand(2) * 60},${220 + rand(3) * 40} ${620 + rand(2) * 60},${240 + rand(3) * 40} ${80 + rand(2) * 60},${240 + rand(3) * 40}`}
        fill={p.ground} />
          {/* Trees */}
          <ellipse cx="60" cy="500" rx="80" ry="40" fill={p.ground} opacity="0.3" />
          <ellipse cx="740" cy="510" rx="100" ry="50" fill={p.ground} opacity="0.3" />
        </g>
      }

      {compositionType === 1 &&
      // Modernist concrete house
      <g>
          <rect x="0" y="450" width="800" height="150" fill={p.light} opacity="0.4" />
          {/* main volume */}
          <rect x="120" y="280" width="560" height="200" fill={p.light} />
          <rect x="120" y="270" width="560" height="14" fill={p.ground} />
          {/* second volume */}
          <rect x="200" y="180" width="280" height="110" fill={p.mid} opacity="0.85" />
          <rect x="200" y="172" width="280" height="10" fill={p.ground} />
          {/* windows */}
          <rect x="160" y="320" width="180" height="120" fill={p.ground} opacity="0.6" />
          <rect x="380" y="320" width="120" height="120" fill={p.sky} opacity="0.6" />
          <rect x="540" y="320" width="100" height="120" fill={p.ground} opacity="0.6" />
          <rect x="240" y="210" width="60" height="60" fill={p.sky} opacity="0.7" />
          <rect x="360" y="210" width="60" height="60" fill={p.sky} opacity="0.7" />
        </g>
      }

      {compositionType === 2 &&
      // Vertical facade / interior columns
      <g>
          <rect x="0" y="0" width="800" height="600" fill={p.ground} opacity="0.1" />
          {[0, 1, 2, 3, 4, 5, 6, 7].map((i) =>
        <rect key={i} x={60 + i * 92} y={120} width={50} height={400} fill={p.mid} opacity={0.7 + rand(i + 5) * 0.3} />
        )}
          {[0, 1, 2, 3, 4, 5, 6, 7].map((i) =>
        <rect key={`s-${i}`} x={56 + i * 92} y={120} width={2} height={400} fill={p.ground} opacity="0.6" />
        )}
          {/* horizontal beam */}
          <rect x="40" y="100" width="720" height="22" fill={p.ground} />
          <rect x="40" y="520" width="720" height="14" fill={p.ground} opacity="0.7" />
          {/* light shaft */}
          <polygon points="380,120 420,120 460,540 340,540" fill={p.light} opacity="0.35" />
        </g>
      }

      {compositionType === 3 &&
      // Interior with beams / cathedral light
      <g>
          <rect x="0" y="0" width="800" height="600" fill={p.light} opacity="0.7" />
          {/* perspective floor */}
          <polygon points="0,600 800,600 600,400 200,400" fill={p.mid} opacity="0.5" />
          {/* central beam vanishing */}
          <polygon points="380,80 420,80 460,400 340,400" fill={p.ground} opacity="0.85" />
          {/* side beams */}
          {[0, 1, 2, 3].map((i) => {
          const off = (i + 1) * 90;
          return (
            <g key={i}>
                <line x1={400 - off} y1="80" x2={400 - off * 0.55} y2="400" stroke={p.ground} strokeWidth="14" opacity="0.7" />
                <line x1={400 + off} y1="80" x2={400 + off * 0.55} y2="400" stroke={p.ground} strokeWidth="14" opacity="0.7" />
              </g>);

        })}
          {/* horizontals */}
          <line x1="80" y1="100" x2="720" y2="100" stroke={p.ground} strokeWidth="6" opacity="0.6" />
          <line x1="80" y1="80" x2="720" y2="80" stroke={p.ground} strokeWidth="3" opacity="0.4" />
        </g>
      }

      {compositionType === 4 &&
      // Aerial / mountain landscape with structure
      <g>
          {/* mountain silhouettes */}
          <polygon points="0,420 200,260 380,360 540,220 720,340 800,300 800,600 0,600" fill={p.mid} opacity="0.7" />
          <polygon points="0,480 180,360 320,440 500,320 680,420 800,380 800,600 0,600" fill={p.ground} opacity="0.6" />
          {/* foreground */}
          <rect x="0" y="500" width="800" height="100" fill={p.ground} opacity="0.85" />
          {/* the building */}
          <rect x="320" y="430" width="180" height="80" fill={p.light} />
          <rect x="320" y="425" width="180" height="8" fill={p.ground} />
          <rect x="335" y="450" width="50" height="50" fill={p.ground} opacity="0.6" />
          <rect x="400" y="450" width="40" height="50" fill={p.sky} opacity="0.7" />
          <rect x="455" y="450" width="35" height="50" fill={p.ground} opacity="0.6" />
        </g>
      }

      {/* grain overlay */}
      <rect width="800" height="600" fill="black" opacity="0.04" />
      {label &&
      <text x="20" y="585" fontFamily="monospace" fontSize="10" fill={p.light} opacity="0.55" letterSpacing="2">
          {label.toUpperCase()}
        </text>
      }
    </svg>);

}

// === Floor plan placeholder (used as decorative bg) ===
function FloorPlanBg({ opacity = 0.15 }) {
  return (
    <svg width="100%" height="100%" viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid slice"
    style={{ position: 'absolute', inset: 0, opacity, pointerEvents: 'none' }}>
      <g stroke="#241206" strokeWidth="1" fill="none">
        <rect x="80" y="80" width="1040" height="540" />
        <line x1="80" y1="240" x2="600" y2="240" />
        <line x1="600" y1="80" x2="600" y2="620" />
        <line x1="600" y1="380" x2="1120" y2="380" />
        <line x1="320" y1="240" x2="320" y2="620" />
        <line x1="80" y1="460" x2="600" y2="460" />
        <line x1="820" y1="380" x2="820" y2="620" />
        {/* doors */}
        <path d="M 320 240 A 40 40 0 0 1 360 280" />
        <path d="M 600 380 A 40 40 0 0 1 640 420" />
        <path d="M 820 380 A 40 40 0 0 1 860 420" />
        {/* furniture */}
        <rect x="140" y="120" width="120" height="60" />
        <rect x="140" y="200" width="60" height="30" strokeDasharray="3 3" />
        <circle cx="450" cy="160" r="40" />
        <rect x="700" y="140" width="180" height="100" />
        <line x1="700" y1="190" x2="880" y2="190" />
        <rect x="940" y="140" width="140" height="180" />
        <rect x="140" y="280" width="120" height="160" />
        <rect x="380" y="280" width="180" height="80" />
        <rect x="380" y="380" width="180" height="60" />
        <rect x="140" y="490" width="200" height="100" />
        <rect x="380" y="490" width="200" height="100" />
        <rect x="640" y="420" width="160" height="170" />
        <rect x="860" y="420" width="220" height="170" />
        <line x1="640" y1="500" x2="800" y2="500" />
        <line x1="860" y1="500" x2="1080" y2="500" />
        {/* dimensions */}
        <line x1="80" y1="50" x2="1120" y2="50" strokeDasharray="2 4" />
        <line x1="80" y1="40" x2="80" y2="60" />
        <line x1="1120" y1="40" x2="1120" y2="60" />
      </g>
    </svg>);

}

// === Reveal-on-scroll wrapper ===
function Reveal({ children, delay = 0, as: As = 'div', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => e.target.classList.add('in'), delay);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={`reveal ${rest.className || ''}`} {...rest}>{children}</As>;
}

// === NAV ===
function Nav({ page, navigate }) {
  const links = [
  { id: 'about', label: 'À propos' },
  { id: 'projects', label: 'Projets' },
  { id: 'home', label: 'Réflexions' },
  { id: 'contact', label: 'Contact' }];

  // Map "insights" pseudo-link to home anchor
  const isActive = (id) => {
    if (id === 'home' && page === 'home') return true;
    if (id === 'about' && page === 'about') return true;
    if (id === 'projects' && (page === 'projects' || page === 'project-detail')) return true;
    if (id === 'contact' && page === 'contact') return true;
    return false;
  };
  return (
    <nav className="nav">
      <button className="nav__brand" onClick={() => navigate('home')}>
        <span className="nav__brand-mark">✺</span>
        Think<span style={{ fontStyle: 'italic', fontWeight: 500 }}>Architecture</span>
      </button>
      <div className="nav__links">
        {links.map((l, i) =>
        <React.Fragment key={l.id}>
            <button
            onClick={() => navigate(l.id)}
            className={isActive(l.id) ? 'is-active' : ''}>
            
              {l.label}
            </button>
            {i < links.length - 1 && <span className="nav__sep">/</span>}
          </React.Fragment>
        )}
      </div>
      <button className="nav__cta-arrow" onClick={() => navigate('contact')} aria-label="Aller au formulaire de contact">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square">
          <path d="M6 18 L18 6" />
          <path d="M8 6 L18 6 L18 16" />
        </svg>
      </button>
    </nav>);

}

// === FOOTER ===
function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand-block">
          <div className="footer__brand">
            <span className="footer__brand-mark">✺</span>
            Think<span style={{ fontStyle: 'italic' }}>Architecture</span>
          </div>
          <p className="footer__tag">Une agence d'architecture basée à Vienne, qui dessine des espaces pour vous...

          </p>
          <img src="assets/oa-ordre-footer.png" alt="Inscrite à l'Ordre des architectes" className="footer__ordre" />
        </div>

        <div>
          <div className="footer__col-title">Agence</div>
          <div className="footer__col-list">
            <a onClick={() => navigate('about')}>À propos</a>
            <a onClick={() => navigate('about')}>Processus</a>
            <a onClick={() => navigate('projects')}>Projets</a>
            <a>Presse</a>
            <a>Carrières</a>
          </div>
        </div>

        <div>
          <div className="footer__col-title">Contact</div>
          <div className="footer__col-list">
            <a href="mailto:marilinebresle@gmail.com">marilinebresle@gmail.com</a>
            <a href="tel:+33680474178">06 80 47 41 78</a>
            <a>24 Rue Vimaine<br />38200 Vienne, France</a>
          </div>
        </div>

        <div>
          <div className="footer__col-title">Réseaux</div>
          <div className="footer__col-list">
            <a>Instagram <span style={{ opacity: 0.5 }}>↗</span></a>
            <a>Are.na <span style={{ opacity: 0.5 }}>↗</span></a>
            <a>LinkedIn <span style={{ opacity: 0.5 }}>↗</span></a>
            <a>Pinterest <span style={{ opacity: 0.5 }}>↗</span></a>
          </div>
        </div>
      </div>

      <div className="footer__bottom">
        <div>© 2026 Think Architecture — Agence de Mariline Bresle</div>
        <div>24 Rue Vimaine · 38200 Vienne</div>
        <div style={{ display: 'flex', gap: 22 }}>
          <a>Mentions légales</a>
          <a>Confidentialité</a>
        </div>
      </div>

      <div className="footer__big-mark" aria-hidden="true">
        Think<span style={{ fontStyle: 'italic' }}>Architecture</span>
      </div>
    </footer>);

}

// === CLOSING CTA (shared) ===
function ClosingCTA({ navigate }) {
  return (
    <section className="closing">
      <Reveal as="h2" className="closing__title">
        Dessinons votre <span className="italic">espace</span><br />
        avec intention.
      </Reveal>
      <Reveal className="closing__cta-wrap" delay={120}>
        <div style={{ maxWidth: 420, fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.6 }}>Que ce soit une résidence privée, une promotion immobilière, un domaine viticole, un projet public ou un loft à aménager — nous serions ravis d'élaborer avec vous votre projet.

        </div>
        <button className="closing__big-arrow" onClick={() => navigate('contact')} aria-label="Contact us">
          <ArrowNE size={28} />
        </button>
      </Reveal>
      <div className="closing__bg-mark" aria-hidden="true">Think.</div>
    </section>);

}

// === Marquee ===
function Marquee({ items }) {
  // Duplicate items so the animation loops seamlessly
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {doubled.map((t, i) =>
        <span key={i}>
            {t}
            <span className="dot" />
          </span>
        )}
      </div>
    </div>);

}

// === Partners marquee ===
function PartnersStrip() {
  const doubled = [...PARTNERS, ...PARTNERS];
  return (
    <section className="partners">
      <div className="partners__head">
        <span className="section-tag">Partenaires & bureaux d'études</span>
        <span className="partners__count">
          <em>{String(PARTNERS.length).padStart(2, '0')}</em> collaborateurs de confiance
        </span>
      </div>
      <div className="partners__track-wrap">
        <div className="partners__track">
          {doubled.map((p, i) =>
          <div
            key={i}
            className={`partners__logo ${p.dark ? 'is-dark' : ''}`}
            title={p.name}
            aria-label={p.name}>
            
              <img src={p.src} alt={p.name} loading="lazy" />
            </div>
          )}
        </div>
        <div className="partners__fade partners__fade--left" />
        <div className="partners__fade partners__fade--right" />
      </div>
    </section>);

}

Object.assign(window, {
  ArrowNE, ArrowRight, ArrowLeft, PlayIcon,
  ArchPlaceholder, FloorPlanBg,
  Reveal, Nav, Footer, ClosingCTA, Marquee, PartnersStrip
});