// Major sections: Hero, About, Sustainability, Projects, Contact, Footer
const { useState, useEffect, useRef } = React;

function Nav({ activeSection, onNavigate }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);

  const handleNav = (id) => {
    setOpen(false);
    onNavigate(id);
  };

  const items = [
    ['about', 'About'],
    ['sustainability', 'Sustainability'],
    ['projects', 'Projects'],
    ['contact', 'Contact'],
  ];

  return (
    <React.Fragment>
      <nav className={`nav ${scrolled || open ? 'scrolled' : ''}`}>
        <div className="nav-inner">
          <button className="brand" onClick={() => handleNav('top')} aria-label="ShriAbodes — Home">
            <img className="brand-logo" src="img/logo.png" alt="ShriAbodes" />
          </button>
          <div className="nav-links">
            {items.map(([id, label]) => (
              <a key={id}
                 href={`#${id}`}
                 className={activeSection === id ? 'active' : ''}
                 onClick={(e) => { e.preventDefault(); handleNav(id); }}>
                {label}
              </a>
            ))}
            <a href="https://instagram.com/shriabodes" target="_blank" rel="noreferrer"
               className="nav-ig" aria-label="ShriAbodes on Instagram">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
              </svg>
            </a>
            <a href="#contact" className="nav-cta" onClick={(e) => { e.preventDefault(); handleNav('contact'); }}>
              Start a project
            </a>
          </div>
          <button className={`menu-btn ${open ? 'open' : ''}`} onClick={() => setOpen(!open)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>
      <div className={`drawer ${open ? 'open' : ''}`}>
        {items.map(([id, label]) => (
          <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); handleNav(id); }}>
            {label}
          </a>
        ))}
        <a href="#contact" onClick={(e) => { e.preventDefault(); handleNav('contact'); }}>
          <em>Start a project →</em>
        </a>
      </div>
    </React.Fragment>
  );
}

function Hero({ onNavigate }) {
  return (
    <header className="hero" id="top">
      <div className="hero-bg">
        <img src="img/shwasam-3.jpg" alt="Shwasam multipurpose hall, Malappuram — earthen walls, mangalore tile roof, set into a bamboo grove" />
      </div>
      <div className="hero-content">
        <div className="hero-tag">Eco-conscious architecture · est. 2019</div>
        <h1>Buildings that <em>breathe</em>, made of what is already there.</h1>
        <div className="hero-meta">
          <p>
            ShriAbodes is the studio of Ar. Srivarshini JM — designing low-carbon homes,
            community spaces and heritage repairs across Tamil Nadu and Kerala.
          </p>
          <span className="caption">↓ Shwasam, Malappuram</span>
        </div>
      </div>
      <a href="#about" className="scroll-cue" onClick={(e) => { e.preventDefault(); onNavigate('about'); }}>
        Scroll
      </a>
    </header>
  );
}

function About() {
  return (
    <section id="about">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="section-num"><span>01</span>About the studio</div>
          </div>
          <h2 className="section-title">An architecture of <em>climate, craft</em> and care.</h2>
        </div>

        <div className="about-grid">
          <div className="about-text">
            <p className="first">
              ShriAbodes is a small architecture practice rooted in the belief that
              buildings should belong to their soil. We design slowly, build slowly,
              and stay close enough to a project to detail it on the wall with the people building it.
            </p>
            <p>
              Founded by Ar. Srivarshini JM in 2019, the studio works mostly in
              Tamil Nadu and Kerala — a geography that has, for centuries, taught
              architects how to keep cool without machines, how to ride out monsoons,
              and how to make a building the village can repair.
            </p>
            <p>
              Our work spans private homes, public halls, hospitality and quiet
              heritage repair. The thread running through them is a low-carbon,
              vernacular-led approach: compressed earth blocks instead of fired brick
              where possible, lime mortar instead of cement, country wood instead of
              dimensional lumber, and a long apprenticeship with the local mason.
            </p>
          </div>

          <div className="about-side">
            <dl>
              <dt>Founder</dt>
              <dd>Ar. Srivarshini JM<br/><span style={{color: 'var(--ink-mute)', fontSize: 13}}>B.Arch · COA registered</span></dd>
              <dt>Founded</dt>
              <dd>2019</dd>
              <dt>Studio</dt>
              <dd>Coimbatore, Tamil Nadu</dd>
              <dt>Practice in</dt>
              <dd>Tamil Nadu · Kerala · Karnataka</dd>
              <dt>Recognition</dt>
              <dd>Featured in <em>Better Living</em>, 2023<br/>Speaker, Auroville Earth Symposium 2024</dd>
            </dl>

            <div className="principles">
              {window.ABOUT_PRINCIPLES.map((p) => (
                <div key={p.num} className="principle">
                  <div className="num">{p.num}</div>
                  <div>
                    <h4>{p.title}</h4>
                    <p>{p.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Sustainability() {
  return (
    <section id="sustainability">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="section-num"><span>02</span>Sustainable architecture</div>
          </div>
          <h2 className="section-title">Six principles we keep <em>coming back to.</em></h2>
        </div>

        <p className="lede">
          We do not treat sustainability as a checklist or a marketing word. It is
          simply the discipline of asking, at every step, whether a different
          material, a different mason, a different season would lower the building's
          weight on the world.
        </p>

        <div className="sus-grid">
          {window.SUSTAINABILITY_PRINCIPLES.map((p) => (
            <div key={p.n} className="sus-card">
              <div className="num">{p.n}</div>
              <h4>{p.title}</h4>
              <p>{p.body}</p>
            </div>
          ))}
        </div>

        <div className="sus-feature">
          <img src="img/farmstay-1.jpg" alt="Farmstay corridor at Malappuram" />
          <div>
            <blockquote>
              The cheapest air-conditioner in South India is a deep eave, a high
              ceiling, and a tree planted forty years ago.
            </blockquote>
            <div className="attrib">— Studio note, 2024</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Projects({ onOpen }) {
  const [filter, setFilter] = useState('All');
  const filters = ['All', 'Completed', 'Ongoing', 'Proposed'];
  const visible = filter === 'All'
    ? window.PROJECTS
    : window.PROJECTS.filter((p) => p.category === filter);

  return (
    <section id="projects">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="section-num"><span>03</span>Selected projects</div>
          </div>
          <h2 className="section-title">A growing record of <em>quiet buildings.</em></h2>
        </div>

        <div className="filters">
          {filters.map((f) => (
            <button key={f}
                    className={`filter ${filter === f ? 'active' : ''}`}
                    onClick={() => setFilter(f)}>
              {f} {f !== 'All' && (
                <span style={{ marginLeft: 6, opacity: 0.6, fontSize: 11 }}>
                  {window.PROJECTS.filter((p) => p.category === f).length}
                </span>
              )}
            </button>
          ))}
        </div>

        <div className="projects-grid">
          {visible.map((p, i) => (
            <article key={p.id}
                     className={`project size-${p.cardSize}`}
                     onClick={() => onOpen(p.id)}>
              <div className="img-wrap">
                <img src={p.cover} alt={`${p.title} ${p.titleItalic}`} loading="lazy" />
                <span className="status">{p.status}</span>
              </div>
              <div className="meta">
                <div className="ti">{p.title} <em>{p.titleItalic}</em></div>
                <span className="loc">{p.year}</span>
              </div>
              <div className="tags">
                <span>{p.location}</span>
                <span className="dot">{p.type}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [form, setForm] = useState({ name: '', email: '', interest: 'Residential', message: '' });
  const [status, setStatus] = useState(null);
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) {
      setStatus({ type: 'err', msg: 'Please fill in name, email and a short message.' });
      return;
    }
    setSubmitting(true);
    setStatus(null);
    // Simulate send. Replace action below with a Formspree / Web3Forms / Cloudflare Worker
    // endpoint to actually receive submissions on a free plan.
    await new Promise((r) => setTimeout(r, 900));
    setSubmitting(false);
    setStatus({ type: 'ok', msg: '✓ Thank you — we will reply within two working days.' });
    setForm({ name: '', email: '', interest: 'Residential', message: '' });
  };

  return (
    <section id="contact">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="section-num"><span>04</span>Contact the studio</div>
          </div>
          <h2 className="section-title">Tell us about <em>your land.</em></h2>
        </div>

        <div className="contact-grid">
          <div className="contact-info">
            <h3>We answer every <em>genuine</em> enquiry.</h3>
            <p>
              Whether it is a small repair to your grandparents' house, a new home,
              or a public project — write to us. The studio is small, and we will
              read what you send.
            </p>

            <dl className="contact-list">
              <div className="row">
                <dt>Write</dt>
                <dd><a href="mailto:shriabodes@gmail.com">shriabodes@gmail.com</a></dd>
              </div>
              <div className="row">
                <dt>Call</dt>
                <dd><a href="tel:+918170057105">+91 81700 57105</a></dd>
              </div>
              <div className="row">
                <dt>Studio</dt>
                <dd>Coimbatore, Tamil Nadu</dd>
              </div>
              <div className="row">
                <dt>Instagram</dt>
                <dd><a href="https://instagram.com/shriabodes" target="_blank" rel="noreferrer">@shriabodes</a></dd>
              </div>
              <div className="row">
                <dt>Hours</dt>
                <dd>Mon–Sat · 10:00 — 18:00 IST</dd>
              </div>
            </dl>
          </div>

          <form className="contact-form" onSubmit={onSubmit} noValidate>
            <div className="row2">
              <div className="field">
                <label htmlFor="cf-name">Your name</label>
                <input id="cf-name" type="text" autoComplete="name"
                  value={form.name} onChange={(e) => setForm({...form, name: e.target.value})} />
              </div>
              <div className="field">
                <label htmlFor="cf-email">Email</label>
                <input id="cf-email" type="email" autoComplete="email"
                  value={form.email} onChange={(e) => setForm({...form, email: e.target.value})} />
              </div>
            </div>
            <div className="field">
              <label htmlFor="cf-interest">Project type</label>
              <select id="cf-interest"
                value={form.interest}
                onChange={(e) => setForm({...form, interest: e.target.value})}>
                <option>Residential</option>
                <option>Hospitality</option>
                <option>Public / Cultural</option>
                <option>Heritage repair</option>
                <option>Just curious</option>
              </select>
            </div>
            <div className="field">
              <label htmlFor="cf-message">Tell us about it</label>
              <textarea id="cf-message" rows="5"
                placeholder="Site, brief, timeline, anything we should know…"
                value={form.message} onChange={(e) => setForm({...form, message: e.target.value})}></textarea>
            </div>
            <button className="submit-btn" type="submit" disabled={submitting}>
              {submitting ? 'Sending…' : 'Send enquiry →'}
            </button>
            {status && (
              <div className={`form-status ${status.type}`}>{status.msg}</div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer({ onNavigate }) {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div>
            <p className="colophon">
              shri<em>abodes</em> — where prosperity abides.
            </p>
            <p style={{ fontSize: 13, color: 'oklch(60% 0.02 60)', maxWidth: '32ch', margin: 0 }}>
              An architecture studio practising in South India.
              We design slowly, with the climate and the craftspeople we work alongside.
            </p>
          </div>
          <div>
            <h5>Site</h5>
            <ul>
              <li><a href="#about" onClick={(e) => { e.preventDefault(); onNavigate('about'); }}>About</a></li>
              <li><a href="#sustainability" onClick={(e) => { e.preventDefault(); onNavigate('sustainability'); }}>Sustainability</a></li>
              <li><a href="#projects" onClick={(e) => { e.preventDefault(); onNavigate('projects'); }}>Projects</a></li>
              <li><a href="#contact" onClick={(e) => { e.preventDefault(); onNavigate('contact'); }}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:shriabodes@gmail.com">shriabodes@gmail.com</a></li>
              <li><a href="tel:+918170057105">+91 81700 57105</a></li>
              <li>Coimbatore, TN</li>
            </ul>
          </div>
          <div>
            <h5>Elsewhere</h5>
            <ul>
              <li><a href="https://instagram.com/shriabodes" target="_blank" rel="noreferrer">Instagram ↗</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>LinkedIn ↗</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Portfolio PDF ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="copyright">
          <span>© 2025 Shriabodes · Ar. Srivarshini JM</span>
          <span>Photography by the studio · all rights reserved</span>
        </div>
      </div>
    </footer>
  );
}

function Instagram() {
  // Sample of project imagery presented Instagram-style with link-out captions.
  // (Live IG feeds need an API + access token — this gives a real preview without
  //  external deps and works on free static hosting.)
  const tiles = [
    { src: 'img/shwasam-3.jpg',         cap: 'Shwasam · Malappuram' },
    { src: 'img/farmstay-13.jpg',       cap: 'Restrooms · farmstay' },
    { src: 'img/timbrel-vault-2.jpg',   cap: 'Timbrel vault · WIP' },
    { src: 'img/sivapuri-temple-9.jpg', cap: 'Sivapuri temple wall' },
    { src: 'img/reception-block-3.jpg', cap: 'Reception block · dusk' },
    { src: 'img/farmstay-15.jpg',       cap: 'Garden gate · Kerala' },
    { src: 'img/farmhouse-theni-2.jpg', cap: 'Farm house · Theni' },
    { src: 'img/farmstay-7.jpg',        cap: 'On site · 2024' },
    { src: 'img/shwasam-9.jpg',         cap: 'Mason in motion' },
    { src: 'img/timbrel-vault-7.jpg',   cap: 'Tile vault studies' },
    { src: 'img/reception-block-7.jpg', cap: 'Entry · farmstay' },
    { src: 'img/shwasam-7.jpg',         cap: 'Lath light at dusk' },
  ];
  const igUrl = 'https://www.instagram.com/shriabodes/';

  return (
    <section id="instagram">
      <div className="container">
        <div className="ig-head">
          <div className="left">
            <div className="ig-avatar">
              <div className="ig-avatar-inner">
                <img src="img/logo.png" alt="ShriAbodes" />
              </div>
            </div>
            <div>
              <p className="ig-handle">@shri<em>abodes</em></p>
              <p className="ig-sub">Recent posts · process · site visits</p>
            </div>
          </div>
          <a href={igUrl} target="_blank" rel="noreferrer" className="ig-follow">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="5" />
              <circle cx="12" cy="12" r="4" />
              <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
            </svg>
            Follow on Instagram
          </a>
        </div>

        <div className="ig-grid">
          {tiles.map((t, i) => (
            <a key={i} href={igUrl} target="_blank" rel="noreferrer" className="ig-tile">
              <img src={t.src} alt={t.cap} loading="lazy" />
              <div className="ig-overlay">
                <span className="ig-cap">{t.cap}</span>
                <span className="ig-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="5" />
                    <circle cx="12" cy="12" r="4" />
                    <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
                  </svg>
                </span>
              </div>
            </a>
          ))}
        </div>

        <div className="ig-foot">
          <a href={igUrl} target="_blank" rel="noreferrer">View all on Instagram →</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, About, Sustainability, Projects, Instagram, Contact, Footer });