import React from "react";
import ExternalLinkIcon from "../assets/ExternalLinkIcon";

export default function HelpSections() {
  return (
    <>
      <div className="wpgsa-cta">
        <a
          href="https://workspace.google.com/marketplace/app/woosync/555512713691"
          className="wpgsa-cta-button"
          target="_blank"
          rel="noopener noreferrer"
          style={{ display: "inline-flex", alignItems: "center", gap: "6px" }}
        >
          Get Google Sheets Add-on
          <span className="wpgsa-cta-link-icon" aria-label="External link" style={{ fontSize: "1em", lineHeight: 1 }}>
            {/* Unicode external link icon */}
            <ExternalLinkIcon />
          </span>
        </a>
        <p>
          Download and install the required companion app from the Google
          Workspace Marketplace.
        </p>
      </div>

      {/* <div className="wpgsa-card" style={{ padding: "16px" }}>
        <h3 style={{margin: "0px"}}>FAQ & Tutorials</h3>
        <ul className="wpgsa-link-list">
          <li><a href="#">How to install the Google Sheets Add-on?</a></li>
          <li><a href="#">How to map custom WooCommerce fields?</a></li>
          <li><a href="#">Troubleshooting: Why are my orders not syncing?</a></li>
          <li><a href="#">A complete guide to two-way syncing</a></li>
        </ul>
      </div> */}

      <div className="wpgsa-card" style={{ padding: "16px" }}>
        <h3 style={{margin: "0px"}}>Need Help?</h3>
        <p>
          If you encounter any issues or require dedicated assistance, please
          contact our support team.
        </p>
        <a
          href="mailto:support@acowebs.zohodesk.com"
          className="wpgsa-support-link"
        >
          support@acowebs.zohodesk.com
        </a>
        <small>We typically respond within 1–2 business days.</small>
      </div>
    </>
  );
}