// Terra Group — Contact + Footer Component
// Exports: Contact

const Modal = ({ title, onClose, children }) => {
  React.useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, [onClose]);

  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(10,37,64,0.6)',zIndex:200,display:'flex',alignItems:'center',justifyContent:'center',padding:24}}>
      <div onClick={e => e.stopPropagation()} style={{background:'white',borderRadius:10,maxWidth:640,width:'100%',maxHeight:'80vh',display:'flex',flexDirection:'column',boxShadow:'0 16px 60px rgba(21,66,112,0.25)'}}>
        <div style={{padding:'22px 28px 18px',borderBottom:'1px solid #E5E9EE',display:'flex',justifyContent:'space-between',alignItems:'center',flexShrink:0}}>
          <h3 style={{fontFamily:"'Playfair Display',serif",fontSize:22,fontWeight:700,color:'#0F1923',margin:0}}>{title}</h3>
          <button onClick={onClose} style={{background:'none',border:'none',cursor:'pointer',fontSize:22,color:'#A0AEC0',lineHeight:1,padding:4}}>×</button>
        </div>
        <div style={{overflowY:'auto',padding:'24px 28px',fontFamily:"'Inter',sans-serif",fontSize:15,lineHeight:1.75,color:'#4A5568'}}>
          {children}
        </div>
      </div>
    </div>
  );
};

const Contact = () => {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', service: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const [modal, setModal] = React.useState(null);
  const [isWide, setIsWide] = React.useState(window.innerWidth >= 900);

  React.useEffect(() => {
    const onResize = () => setIsWide(window.innerWidth >= 900);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  const contactItems = [
    { icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 9.72 19.79 19.79 0 0 1 1.61 1.1a2 2 0 0 1 1.99-2.19h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 6.5a16 16 0 0 0 6 6l.94-.94a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.72 14z"/></svg>, label: 'Phone', value: '(+30) 697 2100130' },
    { icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>, label: 'Email', value: 'info@terragroupevia.gr' },
    { icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>, label: 'Location', value: 'Skorponeria, Evia, Greece' },
  ];

  const s = {
    section: { background: '#f4fafd', padding: '96px 24px 0' },
    inner: { maxWidth: 1200, margin: '0 auto' },
    // Desktop: 2-col (info left, form right). Mobile: stacked
    topGrid: {
      display: 'grid',
      gridTemplateColumns: isWide ? '1fr 1fr' : '1fr',
      gap: isWide ? 64 : 0,
      alignItems: 'start',
      marginBottom: isWide ? 0 : 32,
    },
    // On mobile the top row splits into text + icons side by side
    mobileTopRow: {
      display: isWide ? 'block' : 'grid',
      gridTemplateColumns: isWide ? undefined : '1fr 1fr',
      gap: isWide ? undefined : 24,
      marginBottom: isWide ? 0 : 32,
    },
    eyebrow: { fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#87C8E8', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 },
    line: { width: 28, height: 1, background: '#87C8E8', display: 'inline-block' },
    h2: { fontFamily: "'Playfair Display', serif", fontSize: 'clamp(22px, 3.5vw, 38px)', fontWeight: 700, color: '#0F1923', marginBottom: 16, lineHeight: 1.15 },
    lead: { fontFamily: "'Inter', sans-serif", fontSize: 15, color: '#4A5568', lineHeight: 1.65, marginBottom: isWide ? 36 : 0 },
    infoItem: { display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 18 },
    iconCircle: { width: 38, height: 38, background: '#154270', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
    infoLabel: { fontFamily: "'Inter', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#A0AEC0', marginBottom: 2 },
    infoValue: { fontFamily: "'Inter', sans-serif", fontSize: 14, color: '#0F1923', fontWeight: 500 },
    // Form: full-width on mobile, right column on desktop
    formWrap: { gridColumn: isWide ? undefined : '1 / -1' },
    form: { background: 'white', borderRadius: 10, border: '1px solid #D1D5DB', padding: isWide ? 32 : 24, boxShadow: '0 4px 24px rgba(21,66,112,0.08)' },
    row: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 },
    fieldWrap: { display: 'flex', flexDirection: 'column', gap: 5 },
    label: { fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 600, color: '#2d3e4f' },
    input: { fontFamily: "'Inter', sans-serif", fontSize: 14, padding: '10px 12px', border: '1px solid #D1D5DB', borderRadius: 4, color: '#0F1923', outline: 'none', width: '100%' },
    textarea: { fontFamily: "'Inter', sans-serif", fontSize: 14, padding: '10px 12px', border: '1px solid #D1D5DB', borderRadius: 4, color: '#0F1923', outline: 'none', width: '100%', minHeight: 100, resize: 'vertical' },
    select: { fontFamily: "'Inter', sans-serif", fontSize: 14, padding: '10px 12px', border: '1px solid #D1D5DB', borderRadius: 4, color: '#0F1923', outline: 'none', width: '100%', background: 'white' },
    btn: { width: '100%', padding: '13px', background: '#154270', color: 'white', border: 'none', borderRadius: 4, fontFamily: "'Inter', sans-serif", fontSize: 15, fontWeight: 600, cursor: 'pointer', marginTop: 8 },
    success: { textAlign: 'center', padding: 32 },
    successIcon: { fontSize: 40, marginBottom: 12 },
    successTitle: { fontFamily: "'Playfair Display', serif", fontSize: 22, fontWeight: 700, color: '#0F1923', marginBottom: 8 },
    successText: { fontFamily: "'Inter', sans-serif", fontSize: 15, color: '#4A5568' },
    footer: { background: '#154270', marginTop: 80, padding: '36px 24px' },
    footerInner: { maxWidth: 1200, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    footerLogo: { display: 'flex', alignItems: 'center', gap: 10 },
    footerLogoText: { fontFamily: "'Playfair Display', serif", fontSize: 18, fontWeight: 700, color: 'white', letterSpacing: '0.08em' },
    footerCopy: { fontFamily: "'Inter', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.5)' },
    footerLinks: { display: 'flex', gap: 24 },
    footerLink: { fontFamily: "'Inter', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.65)', textDecoration: 'none', cursor: 'pointer' },
  };

  const InfoItems = () => (
    <div style={isWide ? {} : { paddingTop: 4 }}>
      {contactItems.map((item, i) => (
        <div key={i} style={s.infoItem}>
          <div style={s.iconCircle}>{item.icon}</div>
          <div>
            <div style={s.infoLabel}>{item.label}</div>
            <div style={s.infoValue}>{item.value}</div>
          </div>
        </div>
      ))}
    </div>
  );

  const FormBlock = () => (
    <div style={s.form}>
      {sent ? (
        <div style={s.success}>
          <div style={s.successIcon}>✓</div>
          <div style={s.successTitle}>Message Sent!</div>
          <div style={s.successText}>We'll get back to you shortly.</div>
        </div>
      ) : (
        <form onSubmit={submit}>
          <div style={s.row}>
            <div style={s.fieldWrap}>
              <label style={s.label}>Full Name</label>
              <input style={s.input} type="text" placeholder="Your full name" value={form.name} onChange={e => update('name', e.target.value)} required />
            </div>
            <div style={s.fieldWrap}>
              <label style={s.label}>Email</label>
              <input style={s.input} type="email" placeholder="email@example.com" value={form.email} onChange={e => update('email', e.target.value)} required />
            </div>
          </div>
          <div style={{marginBottom: 16}}>
            <div style={s.fieldWrap}>
              <label style={s.label}>Phone</label>
              <input style={s.input} type="tel" placeholder="+30 697..." value={form.phone} onChange={e => update('phone', e.target.value)} />
            </div>
          </div>
          <div style={{marginBottom: 16}}>
            <div style={s.fieldWrap}>
              <label style={s.label}>Service</label>
              <select style={s.select} value={form.service} onChange={e => update('service', e.target.value)}>
                <option value="">Select a service...</option>
                <option>Property Maintenance</option>
                <option>Property Renovation</option>
                <option>New Projects</option>
                <option>Broking Services</option>
              </select>
            </div>
          </div>
          <div style={{marginBottom: 20}}>
            <div style={s.fieldWrap}>
              <label style={s.label}>Message</label>
              <textarea style={s.textarea} placeholder="Tell us about your property or enquiry..." value={form.message} onChange={e => update('message', e.target.value)}></textarea>
            </div>
          </div>
          <button type="submit" style={s.btn}>Send Message →</button>
        </form>
      )}
    </div>
  );

  return (
    <>
      <section style={s.section} id="contact">
        <div style={s.inner}>
          {isWide ? (
            /* Desktop: text+info left, form right */
            <div style={s.topGrid}>
              <div>
                <div style={s.eyebrow}><span style={s.line}></span>Contact</div>
                <h2 style={s.h2}>Let's Talk</h2>
                <p style={s.lead}>We're here to answer any question about your property — reach out and we'll get back to you promptly.</p>
                <InfoItems />
              </div>
              <FormBlock />
            </div>
          ) : (
            /* Mobile: top row = text (left) + icons (right), below = full-width form */
            <>
              <div style={s.mobileTopRow}>
                <div>
                  <div style={s.eyebrow}><span style={s.line}></span>Contact</div>
                  <h2 style={s.h2}>Let's Talk</h2>
                  <p style={s.lead}>We're here to answer any question about your property.</p>
                </div>
                <InfoItems />
              </div>
              <FormBlock />
            </>
          )}
        </div>
      </section>
      <footer style={s.footer}>
        <div style={s.footerInner}>
          <div style={s.footerLogo}>
            <svg width="24" height="20" viewBox="0 0 100 80" fill="none">
              <polygon points="50,5 90,40 80,40 80,75 20,75 20,40 10,40" fill="white"/>
              <rect x="42" y="38" width="16" height="37" fill="#87C8E8"/>
            </svg>
            <span style={s.footerLogoText}>TERRA GROUP</span>
          </div>
          <div style={s.footerCopy}>© 2026 Terra Group · terragroupevia.gr · Your Home – Our Care</div>
          <div style={s.footerLinks}>
            <span style={{...s.footerLink, cursor:'pointer'}} onClick={() => setModal('terms')}>Terms</span>
            <span style={{...s.footerLink, cursor:'pointer'}} onClick={() => setModal('privacy')}>Privacy</span>
          </div>
        </div>
      </footer>

      {modal === 'terms' && (
        <Modal title="Terms of Use" onClose={() => setModal(null)}>
          <p><strong>Last updated: April 2026</strong></p>
          <p>By accessing and using terragroupevia.gr, you agree to be bound by these Terms of Use. If you do not agree to these terms, please do not use this website.</p>
          <p><strong>Use of Content</strong><br/>All content on this site — including text, images, and graphics — is the property of Terra Group and may not be reproduced without prior written permission.</p>
          <p><strong>Services</strong><br/>Terra Group provides information about property management, renovation, construction, and brokerage services in Evia, Greece. Details provided on this site are for informational purposes only and do not constitute a binding offer.</p>
          <p><strong>Limitation of Liability</strong><br/>Terra Group shall not be liable for any direct, indirect, or consequential damages arising from the use of this website or reliance on any information provided herein.</p>
          <p><strong>Contact</strong><br/>For any questions regarding these terms, please contact us at info@terragroupevia.gr or call (+30) 697 2100130.</p>
        </Modal>
      )}

      {modal === 'privacy' && (
        <Modal title="Privacy Policy" onClose={() => setModal(null)}>
          <p><strong>Last updated: April 2026</strong></p>
          <p>Terra Group is committed to protecting your personal data in accordance with the EU General Data Protection Regulation (GDPR) and applicable Greek law.</p>
          <p><strong>Data We Collect</strong><br/>When you use our contact form, we collect your name, email address, phone number, and message content solely to respond to your enquiry.</p>
          <p><strong>How We Use Your Data</strong><br/>Your data is used only to respond to your enquiry and is never sold or shared with third parties without your explicit consent.</p>
          <p><strong>Data Retention</strong><br/>We retain your data for no longer than necessary to fulfil the purpose for which it was collected, typically no more than 12 months.</p>
          <p><strong>Your Rights</strong><br/>Under GDPR, you have the right to access, correct, or delete your personal data at any time. To exercise these rights, contact us at info@terragroupevia.gr.</p>
          <p><strong>Cookies</strong><br/>This website does not currently use tracking cookies.</p>
          <p><strong>Contact</strong><br/>Data Controller: Terra Group · Skorponeria, Evia, Greece · info@terragroupevia.gr</p>
        </Modal>
      )}
    </>
  );
};

Object.assign(window, { Contact, Modal });