// Section components for Prospec & Design site
// (LogoMark is defined in logo-mark.jsx and attached to window)

// === NAV ===
const Nav = ({ lang, setLang, t }) => (
  <header className="nav">
    <div className="container nav-inner">
      <a href="#top" className="logo">
        <div className="logo-mark">P&amp;D</div>
        <div className="logo-text">
          <div className="logo-name">PROSPEC &amp; DESIGN</div>
          <div className="logo-tag">REMODELING · AUSTIN TX</div>
        </div>
      </a>
      <nav className="nav-links">
        <a href="#about">{t.nav.about}</a>
        <a href="#services">{t.nav.services}</a>
        <a href="#projects">{t.nav.projects}</a>
        <a href="#blog">{t.nav.blog}</a>
        <a href="#contact">{t.nav.quote}</a>
      </nav>
      <div className="nav-right">
        <div className="lang-toggle" role="group" aria-label="Language">
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          <button className={lang === 'es' ? 'active' : ''} onClick={() => setLang('es')}>ES</button>
        </div>
        <a href="tel:+17373547787" className="wa-btn">
          <Icon.WhatsApp size={16} />
          (737) 354-7787
        </a>
      </div>
    </div>
  </header>
);

// === HERO ===
const Hero = ({ t }) => (
  <section className="hero" id="top">
    <div className="container hero-grid">
      <div>
        <div className="hero-eyebrow">{t.hero.eyebrow}</div>
        <h1>
          {t.hero.title_pre} <span className="green-text">{t.hero.title_accent}</span> {t.hero.title_post}
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-actions">
          <a href="#contact" className="btn btn-primary">
            {t.hero.cta_primary} <Icon.ArrowRight size={16} />
          </a>
          <a href="#projects" className="btn btn-ghost-light">{t.hero.cta_secondary}</a>
        </div>
        <div className="hero-stats">
          <div>
            <div className="stat-num"><span className="green-text">{t.hero.stat1_num}</span></div>
            <div className="stat-label">{t.hero.stat1_label}</div>
          </div>
          <div>
            <div className="stat-num">{t.hero.stat2_num}</div>
            <div className="stat-label">{t.hero.stat2_label}</div>
          </div>
          <div>
            <div className="stat-num">{t.hero.stat3_num}</div>
            <div className="stat-label">{t.hero.stat3_label}</div>
          </div>
        </div>
      </div>
      <div className="hero-image-wrap">
        <img
          src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=900&q=80&auto=format&fit=crop"
          alt="Modern luxury home interior"
        />
        <div className="hero-badge">
          <div className="hero-badge-icon"><Icon.Award size={22} /></div>
          <div className="hero-badge-text">
            <strong>{t.hero.badge_title}</strong>
            {t.hero.badge_sub}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// === SERVICES ===
const Services = ({ t }) => {
  const icons = [Icon.Construction, Icon.Remodeling, Icon.Carpentry, Icon.Finish];
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head">
          <div className="section-head-stack">
            <div className="eyebrow">{t.services.eyebrow}</div>
            <h2>
              {t.services.title_pre} <span className="green-text">{t.services.title_accent}</span> {t.services.title_post}
            </h2>
          </div>
          <p>{t.services.sub}</p>
        </div>
        <div className="services-grid">
          {t.services.items.map((item, i) => {
            const IconComp = icons[i];
            return (
              <div className="service-card" key={i}>
                <div className="service-icon"><IconComp size={28} /></div>
                <h3>{item.title}</h3>
                <p>{item.desc}</p>
                <div className="service-link">
                  {t.services.learn_more} <Icon.ArrowRight size={12} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// === ABOUT ===
const About = ({ t }) => (
  <section className="section section-soft" id="about">
    <div className="container about-grid">
      <div className="about-image-wrap">
        <img
          src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=900&q=80&auto=format&fit=crop"
          alt="Prospec & Design construction team"
        />
        <div className="about-image-tag">
          <div className="num">{t.about.tag_num}</div>
          <div>
            <div style={{fontSize: 13, fontWeight: 700}}>{t.about.tag_label.toUpperCase()}</div>
          </div>
        </div>
      </div>
      <div className="about-text">
        <div className="eyebrow">{t.about.eyebrow}</div>
        <h2>
          {t.about.title_pre} <span className="green-text">{t.about.title_accent}</span>
        </h2>
        <p>{t.about.p1}</p>
        <p>{t.about.p2}</p>
        <div className="about-bullets">
          {t.about.bullets.map((b, i) => (
            <div className="about-bullet" key={i}>
              <span className="dot"><Icon.Check size={14} /></span>
              {b}
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// === WHY ===
const Why = ({ t }) => (
  <section className="section section-dark">
    <div className="container why-grid">
      <div className="why-side">
        <div className="eyebrow">{t.why.eyebrow}</div>
        <h2>
          {t.why.title_pre} <span className="green-text">{t.why.title_accent}</span>
        </h2>
        <p>{t.why.sub}</p>
        <a href="#contact" className="btn btn-primary">
          {t.why.cta} <Icon.ArrowRight size={16} />
        </a>
      </div>
      <div className="why-list">
        {t.why.items.map((item, i) => (
          <div className="why-item" key={i}>
            <div className="why-num">0{i + 1}</div>
            <div>
              <h4>{item.title}</h4>
              <p>{item.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// === PROJECTS ===
const Projects = ({ t }) => {
  const imgs = [
    'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=700&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=700&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=700&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=700&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1556909190-eccf4a8bf97a?w=700&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1620626011761-996317b8d101?w=700&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=700&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=700&q=80&auto=format&fit=crop',
  ];
  const tallIdx = [0, 5];
  return (
    <section className="section" id="projects">
      <div className="container">
        <div className="section-head">
          <div className="section-head-stack">
            <div className="eyebrow">{t.projects.eyebrow}</div>
            <h2>
              {t.projects.title_pre} <span className="green-text">{t.projects.title_accent}</span>
            </h2>
          </div>
          <a href="projects.html" className="btn btn-dark">{t.projects.cta} <Icon.ArrowRight size={16} /></a>
        </div>
        <div className="projects-grid">
          {t.projects.items.map((item, i) => (
            <div className={`project-card ${tallIdx.includes(i) ? 'tall' : ''}`} key={i}>
              <img src={imgs[i]} alt={item.title} />
              <div className="project-overlay">
                <div>
                  <div className="project-tag">{item.tag}</div>
                  <div className="project-title">{item.title}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// === SERVICE AREA ===
const Area = ({ t }) => (
  <section className="section section-soft">
    <div className="container area-grid">
      <div>
        <div className="eyebrow">{t.area.eyebrow}</div>
        <h2 style={{marginTop: 16}}>
          {t.area.title_pre} <span className="green-text">{t.area.title_accent}</span>
        </h2>
        <p style={{color: 'var(--ink-2)', marginTop: 18, maxWidth: 480}}>{t.area.sub}</p>
        <div className="area-cities">
          {t.area.cities.map((city, i) => (
            <div className="area-city" key={i}>
              <span className="pin"><Icon.Pin size={16} /></span>
              {city}
            </div>
          ))}
        </div>
      </div>
      <div className="area-map">
        <AustinMap cities={t.area.cities} />
      </div>
    </div>
  </section>
);

// === Austin map illustration (stylized) ===
const AustinMap = ({ cities }) => {
  // Approximate relative positions (stylized) for the 10 cities
  const points = [
    { x: 50, y: 50, name: 'Austin', big: true },
    { x: 30, y: 45, name: 'Lakeway' },
    { x: 36, y: 42, name: 'Westlake' },
    { x: 25, y: 50, name: 'Bee Cave' },
    { x: 45, y: 22, name: 'Cedar Park' },
    { x: 60, y: 18, name: 'Round Rock' },
    { x: 65, y: 30, name: 'Pflugerville' },
    { x: 50, y: 78, name: 'Buda' },
    { x: 55, y: 88, name: 'Kyle' },
    { x: 25, y: 75, name: 'Dripping Springs' },
  ];
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style={{width: '100%', height: '100%'}}>
      <defs>
        <pattern id="grid" width="6" height="6" patternUnits="userSpaceOnUse">
          <path d="M 6 0 L 0 0 0 6" fill="none" stroke="#e6e8ee" strokeWidth="0.2" />
        </pattern>
      </defs>
      <rect width="100" height="100" fill="url(#grid)" />
      {/* stylized Texas-ish curved boundary */}
      <path
        d="M 15 25 Q 10 50, 18 75 Q 35 95, 60 92 Q 85 88, 88 60 Q 90 35, 75 18 Q 50 8, 25 15 Z"
        fill="rgba(39,174,96,0.06)"
        stroke="rgba(39,174,96,0.3)"
        strokeWidth="0.4"
        strokeDasharray="1.5 1"
      />
      {/* connector lines */}
      {points.slice(1).map((p, i) => (
        <line key={i} x1={50} y1={50} x2={p.x} y2={p.y} stroke="#27ae60" strokeWidth="0.25" strokeDasharray="1 1" opacity="0.5" />
      ))}
      {points.map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r={p.big ? 2.8 : 1.4} fill="#27ae60" />
          {p.big && <circle cx={p.x} cy={p.y} r={5} fill="none" stroke="#27ae60" strokeWidth="0.4" opacity="0.5" />}
          <text
            x={p.x + (p.big ? 4 : 2.2)}
            y={p.y + 1}
            fontSize={p.big ? 3.2 : 2.2}
            fontWeight={p.big ? 800 : 600}
            fill={p.big ? '#0d1b3a' : '#4a5570'}
            fontFamily="Inter, sans-serif"
          >
            {p.name}
          </text>
        </g>
      ))}
    </svg>
  );
};

// === CONTACT ===
const Contact = ({ t, lang }) => (
  <section className="section" id="contact">
    <div className="container">
      <div className="section-head" style={{justifyContent: 'flex-start', flexDirection: 'column', alignItems: 'flex-start', gap: 0, marginBottom: 56}}>
        <div className="eyebrow">{t.contact.eyebrow}</div>
        <h2 style={{marginTop: 16}}>
          {t.contact.title_pre} <span className="green-text">{t.contact.title_accent}</span>
        </h2>
        <p style={{color: 'var(--ink-2)', marginTop: 18, maxWidth: 560}}>{t.contact.sub}</p>
      </div>
      <div className="contact-grid">
        <form className="contact-form" onSubmit={(e) => { e.preventDefault(); alert(t.contact.form.submit + ' ✓'); }}>
          <div className="form-row">
            <div className="field">
              <label>{t.contact.form.name}</label>
              <input type="text" placeholder={t.contact.form.placeholder_name} required />
            </div>
            <div className="field">
              <label>{t.contact.form.phone}</label>
              <input type="tel" placeholder={t.contact.form.placeholder_phone} required />
            </div>
          </div>
          <div className="field">
            <label>{t.contact.form.email}</label>
            <input type="email" placeholder={t.contact.form.placeholder_email} required />
          </div>
          <div className="field">
            <label>{t.contact.form.type}</label>
            <select>
              {t.contact.form.type_options.map((o, i) => <option key={i}>{o}</option>)}
            </select>
          </div>
          <div className="field">
            <label>{t.contact.form.message}</label>
            <textarea placeholder={t.contact.form.placeholder_msg}></textarea>
          </div>
          <button type="submit" className="btn btn-primary" style={{width: '100%', justifyContent: 'center'}}>
            {t.contact.form.submit} <Icon.ArrowRight size={16} />
          </button>
        </form>
        <div className="contact-info">
          <div className="contact-block">
            <div className="contact-icon"><Icon.Pin size={20} /></div>
            <div>
              <div className="lbl">{t.contact.info.addr_lbl}</div>
              <div className="val" style={{whiteSpace: 'pre-line'}}>{t.contact.info.addr_val}</div>
            </div>
          </div>
          <div className="contact-block">
            <div className="contact-icon"><Icon.Phone size={20} /></div>
            <div>
              <div className="lbl">{t.contact.info.phone_lbl}</div>
              <div className="val">{t.contact.info.phone_val}</div>
            </div>
          </div>
          <div className="contact-block">
            <div className="contact-icon"><Icon.Mail size={20} /></div>
            <div style={{ flex: 1 }}>
              <div className="lbl">{t.contact.info.email_lbl}</div>
              <div className="val" style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 14 }}>
                <div><a href="mailto:help@prospecdesign.com">help@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'Customer support' : 'Soporte al cliente'}</span></div>
                <div><a href="mailto:hello@prospecdesign.com">hello@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'General inquiries' : 'Consultas generales'}</span></div>
                <div><a href="mailto:info@prospecdesign.com">info@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'Information' : 'Información'}</span></div>
                <div><a href="mailto:lissy@prospecdesign.com">lissy@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'Partnerships' : 'Soporte para alianzas'}</span></div>
                <div><a href="mailto:wellyton@prospecdesign.com">wellyton@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'Technical support' : 'Soporte técnico'}</span></div>
              </div>
            </div>
          </div>
          <div className="contact-block">
            <div className="contact-icon"><Icon.Clock size={20} /></div>
            <div>
              <div className="lbl">{t.contact.info.hours_lbl}</div>
              <div className="val" style={{whiteSpace: 'pre-line', fontSize: 15, fontWeight: 500}}>{t.contact.info.hours_val}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// === FOOTER ===
const Footer = ({ t }) => (
  <footer>
    <div className="container">
      <div className="footer-grid">
        <div>
          <a href="#top" className="logo footer-logo">
            <div className="logo-mark">P&amp;D</div>
            <div className="logo-text">
              <div className="logo-name">PROSPEC &amp; DESIGN</div>
              <div className="logo-tag">REMODELING · AUSTIN TX</div>
            </div>
          </a>
          <p className="footer-about">{t.footer.about}</p>
          <div className="socials">
            <a href="#" aria-label="Facebook"><Icon.Facebook size={16} /></a>
            <a href="#" aria-label="Instagram"><Icon.Instagram size={16} /></a>
            <a href="#" aria-label="LinkedIn"><Icon.Linkedin size={16} /></a>
            <a href="#" aria-label="Yelp"><Icon.Yelp size={16} /></a>
          </div>
        </div>
        <div>
          <h5>{t.footer.services_h}</h5>
          <ul>
            {t.footer.service_links.map((l, i) => <li key={i}><a href="#services">{l}</a></li>)}
          </ul>
        </div>
        <div>
          <h5>{t.footer.company_h}</h5>
          <ul>
            {t.footer.company_links.map((l, i) => <li key={i}><a href={SERVICE_HREF[i] || "services.html"}>{l}</a></li>)}
          </ul>
        </div>
        <div>
          <h5>{t.footer.contact_h}</h5>
          <div className="footer-contact-line"><Icon.Phone size={16} /> (737) 354-7787</div>
          <div className="footer-contact-line"><Icon.Mail size={16} /> help@prospecdesign.com</div>
          <div className="footer-contact-line"><Icon.Pin size={16} /> Austin, Texas</div>
          <div className="footer-contact-line"><Icon.Clock size={16} /> Mon – Fri · 8am – 6pm</div>
        </div>
      </div>
      <div className="footer-bottom">
        <div>{t.footer.copyright}</div>
        <div className="licensed-badge">
          <Icon.Award size={16} /> {t.footer.licensed}
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Services, About, Why, Projects, Area, Contact, Footer });